<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Agent party</title>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/transition.css">
  <!-- GitHub Markdown CSS for styling -->
  <link rel="stylesheet" href="css/github-markdown.min.css">
  <!-- Highlight.js CSS for code highlighting -->
  <link rel="stylesheet" href="css/github.min.css">
  <script src="js/clipboard.min.js"></script>
  <!--引入html2canvas-->
  <script src="js/html2canvas.min.js"></script>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="node_modules/element-plus/dist/index.css">
  <link rel="stylesheet" href="fontawesome/css/all.min.css">
  <link rel="icon" href="source/icon.png" type="image/png">
  <!-- Voice Activation Detection -->
  <script src="js/ort.js"></script>
  <script src="js/bundle.min.js"></script>
  <script src="js/qrcode.min.js"></script>
  <script src="node_modules/driver.js/dist/driver.js.iife.js"></script>
  <link rel="stylesheet" href="node_modules/driver.js/dist/driver.css">
  <script>
    console.log(`
     _       ____   _____   _   _   _____ 
    / \\     / ___| | ____| | \\ | | |_   _|
   / _ \\   | |  _  |  _|   |  \\| |   | |  
  / ___ \\  | |_| | | |___  | |\\  |   | |  
 /_/   \\_\\  \\____| |_____| |_| \\_|   |_|  
                                          
  ____       _      ____    _____  __   __
 |  _ \\     / \\    |  _ \\  |_   _| \\ \\ / /
 | |_) |   / _ \\   | |_) |   | |    \\ V / 
 |  __/   / ___ \\  |  _ <    | |     | |  
 |_|     /_/   \\_\\ |_| \\_\\   |_|     |_|  
       
 github repo: https://github.com/heshengtao/super-agent-party
`);
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}
  </script>
  <!-- Include markdown-it and highlight.js scripts -->
  <script src="js/markdown-it.min.js"></script>
  <script src="js/highlight.min.js"></script>
  <script src="js/locales.js"></script>
  <script src="js/mermaid.min.js"></script>
  <script src="js/uuid.min.js"></script>
  <script>
    mermaid.initialize({ 
      startOnLoad: false,
      securityLevel: 'loose',
      theme: 'default',
    });
  </script>
  <!--  MathJax 配置  -->
  <script>
    window.MathJax = {
      options: {
        ignoreHtmlClass: 'user-message-content'  // 匹配用户消息容器类名
      },
      tex: {
        inlineMath: [
          ['$', '$']       // 常见的行内公式定界符
        ],
        displayMath: [
          ['$$', '$$']     // 常见的行间公式定界符
        ],
      },
      svg: {
        fontCache: 'global' // 使用全局字体缓存
      },
      startup: {
        pageReady: () => {
          // 可选：页面加载完成后执行一些操作
          console.log("MathJax is ready!");
        }
      }
    };
  </script>
  <script id="MathJax-script" async src="js/tex-svg.js"></script>
</head>
<body>
  <div id="app">
    <!-- 顶部栏 -->
    <el-header v-if="isElectron || isMobile" class="top-bar" height="30px">
      <div class="window-controls">
        <div v-show="!isAssistantMode&&!isMobile&&settings?.model!==''" class="model-info" @click="showModelDialog = true" >
          <el-tooltip :content="t('clickToSwitchModel')">
            <el-alert type="primary" :closable="false" style="max-height: 32px;">
              <span>{{t("model") +": "+settings.model}}</span>  
            </el-alert>
          </el-tooltip>
        </div>
        <div v-show="!isAssistantMode&&!isMobile" class="model-info" @click="openExtensionsDialog" >
          <el-tooltip :content="t('clickToSwitchExtensions')">
            <el-alert type="primary" :closable="false" style="max-height: 32px;">
              <span>{{t("extension") +": "+currentViewName}}</span>  
            </el-alert>
          </el-tooltip>
        </div>
        <el-button 
          v-if="updateAvailable&&!isAssistantMode&&!isMobile"
          @click="handleUpdateAction" 
          class="top-bar-btn update-btn"
          :class="{ 'installed': updateDownloaded }"
          text>
          <el-icon>
            <i :class="updateIcon"></i>
          </el-icon>
          {{ updateButtonText }}
          <span v-if="downloadProgress > 0 && !updateDownloaded" class="progress-text">
            ({{ downloadProgress }}%)
          </span>
        </el-button>
        <el-button  v-if="!isAssistantMode&&!isMobile" @click="restartDriverGuide" class="top-bar-btn" text id="driver-guide-btn" :title=" t('tutorial')">
          <el-icon>
            <i class="fa-solid fa-school"></i>
          </el-icon>
        </el-button>
      <!-- 添加移动端菜单按钮 -->
      <el-button 
      class="top-bar-btn"
       v-if="!isAssistantMode&&isMobile" 
       @click="isCollapse = sidebarVisible;sidebarVisible = !sidebarVisible"
       text
       :title="isCollapse ? t('expandAside') : t('collapseAside')">
          <el-icon>
            <i :class="!sidebarVisible ? 'fa-solid fa-bars' : 'fa-solid fa-bars-staggered'"></i>
          </el-icon>
      </el-button>
        <el-button 
          v-if="!isAssistantMode&&!isMobile"
          @click="openLogDialog"
          class="top-bar-btn"
          text
          :title="t('serverLogs') || 'Server Logs'">
          <el-icon>
            <i class="fa-solid fa-terminal"></i>
          </el-icon>
        </el-button>
        <!-- 新增展开/收起按钮 -->
        <el-button 
          v-if="!isAssistantMode&&!isMobile"
          @click="isCollapse = !isCollapse"
          class="top-bar-btn"
          text
          :title="isCollapse ? t('expandAside') : t('collapseAside')">
          <el-icon>
            <i :class="isCollapse ? 'fa-solid fa-bars' : 'fa-solid fa-bars-staggered'"></i>
          </el-icon>
        </el-button>
        <el-button 
          @click="fixedWindow"
          v-if="isAssistantMode"
          class="top-bar-btn"
          text
          :title="isFixedWindow ? t('unfixedWindow'):t('fixedWindow')">
          <el-icon>
            <i :class="isFixedWindow ? 'fa-solid fa-thumbtack-slash':'fa-solid fa-thumbtack'"></i>
          </el-icon>
        </el-button>
        <el-button 
          @click="toggleCapsuleMode"
          v-if="!isCapsuleMode&&!isAssistantMode&&!isMobile"
          class="top-bar-btn"
          text
          :title="t('CapsuleMode')">
          <el-icon>
            <i class="fa-solid fa-capsules"></i>
          </el-icon>
        </el-button>
        <el-button 
          @click="toggleAssistantMode"
          class="top-bar-btn"
          text
          :title="isAssistantMode ?  t('maximize'):t('assistantMode')">
          <el-icon>
            <i :class="isAssistantMode ?  'fa-solid fa-expand' : 'fa-solid fa-wand-magic-sparkles'"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="minimizeWindow" class="top-bar-btn" text :title="t('minimize')">
          <el-icon>
            <i class="fa-solid fa-minus"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="toggleIcon" class="top-bar-btn" text :title="t('maximize')">
          <el-icon>
            <i :class="iconClass"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="closeWindow" class="top-bar-btn" text :title="t('close')">
          <el-icon>
            <i class="fa-solid fa-xmark"></i>
          </el-icon>
        </el-button>
      </div>
    </el-header>

    <!-- 主容器 -->
    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside 
        :width="sidebarStyle.width"
        class="sidebar"
        :class="{ 'mobile-sidebar': isMobile }"
        @dblclick="isCollapse = !isCollapse"
        v-show="!isMobile || sidebarVisible">
        <el-menu
          :collapse="isCollapse"
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleSelect">
          <el-menu-item index="home">
            <el-icon>
              <i class="fa-solid fa-comment"></i>
            </el-icon>
            <template #title>{{ t('chat') }}</template>
          </el-menu-item>
          <el-menu-item index="model-config" id="model-config">
            <el-icon>
              <i class="fa-solid fa-hexagon-nodes"></i>
            </el-icon>
            <template #title>{{ t('modelConfig') }}</template>
          </el-menu-item>
          <el-menu-item index="toolkit">
            <el-icon>
              <i class="fa-solid fa-toolbox"></i>
            </el-icon>
            <template #title>{{ t('toolkit') }}</template>
          </el-menu-item>
          <el-menu-item index="role">
            <el-icon>
              <i class="fa-solid fa-masks-theater"></i>
            </el-icon>
            <template #title>{{ t('role') }}</template>
          </el-menu-item>
          <el-menu-item index="deploy-bot">
              <el-icon>
                  <i class="fa-solid fa-robot"></i>
              </el-icon>
              <template #title>{{ t('deployBot') }}</template>
          </el-menu-item>
          <el-menu-item index="api-group">
            <el-icon>
              <i class="fa-solid fa-plug"></i>
            </el-icon>
            <template #title>{{ t('apiGroup') }}</template>
          </el-menu-item>
          <el-menu-item index="storage">
            <el-icon>
              <i class="fa-solid fa-box-archive"></i>
            </el-icon>
            <template #title>{{ t('storage') }}</template>
          </el-menu-item>
          <el-menu-item index="system">
            <el-icon>
              <i class="fa-solid fa-gear"></i>
            </el-icon>
            <template #title>{{ t('systemSettings') }}</template>
          </el-menu-item>
          <el-menu-item 
            index="logo"
            class="sidebar-logo">
            <el-icon class="logo-icon"><img src="./source/icon.png" /></el-icon>
            <template #title>{{ t('aboutUs') }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div 
        class="sidebar-mask"
        v-show="isMobile && sidebarVisible"
        @click="sidebarVisible = false"></div>

    <!-- 后端日志弹窗 -->
    <el-dialog
      v-model="showLogDialog"
      :title="t('serverLogs') || 'Backend Logs'"
      width="70%"
      top="5vh"
      class="log-dialog"
      :append-to-body="true"
    >
      <div class="log-container" ref="logContainer">
        <pre>{{ logContent }}</pre>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="fetchLogs">
            <el-icon><i class="fa-solid fa-rotate-right"></i></el-icon> {{ t('refresh') || 'Refresh' }}
          </el-button>
          <el-button type="primary" @click="showLogDialog = false">{{ t('confirm') || 'OK' }}</el-button>
        </span>
      </template>
    </el-dialog>

      <el-dialog
        v-model="showModelDialog"
        :title="t('mainModel')"
        width="600px">
        <div class="knowledge-dialog-content">
          <!-- 服务器列表 -->
          <div
            v-for="provider in modelProviders"
            :key="provider.id"
            class="knowledge-item"
            :class="{ active: settings.selectedProvider === provider.id }"
            @click="
              settings.selectedProvider = provider.id;
              selectMainProvider(provider.id);
              showModelDialog = false;
            "
          >
            <img
              :src="getVendorLogo(provider.vendor)"
              class="mini-vendor-logo"
            />
            <span>{{ provider.modelId }}</span>
          </div>
          <div v-if="Object.keys(modelProviders).length === 0" class="empty-tip">
              {{ t('firstTimeUse') }}
              <el-link
                type="primary"
                :underline="false"
                class="font-medium"
                @click="switchToApiBox"
              >
                <el-icon class="mr-1">
                  <i class="fa-solid fa-key"></i>
                </el-icon>{{ t('keyBoxInterface') }}
              </el-link>
              {{ t('addProviderReturnSelect') }}
              {{ t('mainmodelnotice') }}
          </div>
        </div>
      </el-dialog>  
      <!-- 扩展选择对话框 -->
      <el-dialog
        :title="t('switchExtension')"
        v-model="showExtensionsDialog"
        width="60%"
        :close-on-click-modal="false">
        <div class="extensions-list" :style="{ 'overflow-x': 'hidden'}">
          <!-- 默认视图选项 -->
          <el-card 
            class="extension-card default-view-card"
            :class="{ active: currentExtension === null }"
            @click="resetToDefaultView()">
            <div class="extension-info">
              <h3>{{ t('defaultView') }}</h3>
              <p>{{ t('defaultViewDescription') }}</p>
            </div>
          </el-card>
          
          <!-- 分隔线 -->
          <div class="extensions-divider" v-if="extensions.length > 0">
            <span>
              {{ t('availableExtensions') }}
              <el-link
                type="primary"
                :underline="false"
                href="#" 
                @click.stop.prevent="switchToExtensionPage();showExtensionsDialog = false" 
              >
                <el-icon class="mr-1">
                  <i class="fa-solid fa-puzzle-piece"></i>
                </el-icon>{{ t('goToExtensionPage') }}
              </el-link>
            </span>
          </div>
          <!-- 扩展列表 -->
          <el-empty v-if="extensions.length === 0" :description="t('noExtensionsFound')" ></el-empty>
            <el-card
              v-for="ext in extensions"
              :key="ext.id"
              class="extension-card"
              :class="{ active: currentExtension && currentExtension.id === ext.id }"
              @click="switchExtension(ext)">
              
              <!-- 右上角按钮组 -->
              <div class="btn-top-right">
                <!-- 浏览器打开按钮 -->
                <el-button
                  type="default"
                  circle
                  size="small"
                  @click.stop="openExtension(ext);switchExtension(ext)">
                  <i class="fa-solid fa-external-link"></i>
                </el-button>
                
                <!-- 独立窗口打开按钮（仅在Electron环境下显示） -->
                <el-button
                  v-if="isElectron"
                  type="primary"
                  circle
                  size="small"
                  @click.stop="openExtensionInWindow(ext)"
                  style="margin-left: 8px;">
                  <i class="fa-solid fa-window-restore"></i>
                </el-button>
              </div>

              <div class="extension-info">
                <h3>{{ ext.name }}</h3>
                <p>{{ ext.description }}</p>
                <div class="extension-meta">
                  <span>v{{ ext.version }}</span>
                  <span>{{ ext.author }}</span>
                </div>
              </div>
            </el-card>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showExtensionsDialog = false">{{ t('cancel') }}</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 内容区 -->
      <el-main class="content">
        <!-- 聊天界面保持不变 -->
        <div v-show="activeMenu === 'home'" class="page chat-container">
        <!-- 最外层 wrapper，负责整体左右布局 -->
        <div class="chat-wrapper" 
            ref="chatWrapperRef"
            :class="{ 
              'collapsed-right': !sidePanelOpen, 
              'collapsed-left': !chatAreaOpen,
              'resizing': isResizing
            }">
          
          <!-- 添加拖拽遮罩层 -->
          <div v-if="isResizing" class="resize-overlay"></div>
            <!-- 聊天消息列表 -->
            <div class="chat-area" 
                ref="chatAreaRef"
                :class="{ collapsed: !chatAreaOpen }" 
                v-show="chatAreaOpen">
              <div class="messages-container" ref="messagesContainer"   v-if="!isCapsuleMode">
                <div v-for="(message, index) in messages" :key="index" class="message" :class="message.role">
                  <div v-if="ttsSettings.enabled && message.role === 'assistant'" class="tts-controls">
                    <el-tooltip :content="message.isPlaying || false ? t('pause') : t('play')">
                      <el-button 
                        @click="toggleTTS(message)"
                        circle 
                        size="small"
                      >
                        <i v-if="!message.isPlaying" class="fa-solid fa-play"></i>
                        <i v-else class="fa-solid fa-pause"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip :content="t('backward')">
                      <el-button 
                        @click="backwardTTS(message)"
                        circle 
                        size="small"
                      >
                        <i class="fa-solid fa-backward"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip :content="t('forward')">
                      <el-button 
                        @click="forwardTTS(message)"
                        circle 
                        size="small"
                      >
                        <i class="fa-solid fa-forward"></i>
                      </el-button>
                    </el-tooltip>
                    <span class="tts-status" v-if="message.ttsChunks">
                      {{ (message.currentChunk || 0) + 1 }}/{{ message.ttsChunks.length }}
                    </span>
                    <span class="tts-status" v-else>
                      {{ t('initializing') }}
                    </span>
                    <span class="tts-status" v-if="message.role === 'assistant' && !isMobile">
                      {{ t('first_sentence_latency')+': '+message?.first_sentence_latency +'ms,    '+ t('TTSelapsedTime')+': '+message?.TTSelapsedTime + 's'}}
                    </span>
                  </div>
                  <div class="message-content" :class="{ typing: message.role === 'assistant' && isTyping && index === messages.length - 1 }">
                    <!-- 用户消息内容 -->
                    <div v-if="message.role === 'user'" class="user-content" data-mjx-disabled="true">
                      <div v-html="message.content" class = "user-msg"></div>
                      <!-- 文件链接展示 -->
                      <div v-if="message.fileLinks?.length" class="file-links">
                        <a v-for="(link, linkIndex) in message.fileLinks" :key="linkIndex" :href="formatFileUrl(link.path)" target="_blank" class="file-link">
                          @{{ link.name }}
                        </a>
                      </div>
                      <!-- 图片展示 -->
                      <div v-if="message.imageLinks?.length" class="image-links">
                        <img v-for="(link, linkIndex) in message.imageLinks" :key="linkIndex" :src="formatFileUrl(link.path)" class="image-link"/>
                      </div>
                    </div>
                    <!-- AI回复内容 -->
                    <div v-else-if="message.role === 'assistant'"  class="markdown-body" v-html="message.briefly ? formatMessage(message.pure_content??msg.content,index) : formatMessage(message.content,index)"></div>
                    <!-- 系统消息内容 -->
                    <div v-else class="system-content" data-mjx-disabled="true" >
                      <div 
                        v-html="index===0 ? (t('system_prompt') + message.content):message.content" 
                        :style="{ 
                          'max-height': index===0 ? '200px' : 'none',
                          'overflow-y': index===0 ? 'auto' : 'hidden'
                        }"
                        class="scroll-on-hover"
                        @click="openEditDialog(message.role, message.content,index)"
                      ></div>
                    </div>
                  </div>
                  <!-- 添加复制按钮 -->
                  <div class="message-actions">
                    <el-tooltip v-if="mainAgent === 'super-model' || message.role !== 'system'" :content="t('edit')" placement="bottom">
                      <el-button @click="openEditDialog(message.role, message.content,index)" circle size="small">
                        <i class="fa-solid fa-pen-to-square"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="message.role === 'assistant'" :content="t('briefly')" placement="bottom">
                      <el-button 
                        class="briefly-btn" 
                        @click="toggleBriefly(index)"
                        circle 
                        size="small">
                        <i class="fa-solid fa-asterisk"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="message.role === 'assistant'" :content="t('rewrite')" placement="bottom">
                      <el-button 
                        class="rewrite-btn" 
                        @click="rewrite(index)"
                        circle 
                        size="small">
                        <i class="fa-solid fa-rotate"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip :content="t('copy')" placement="bottom">
                      <el-button 
                        class="copy-btn" 
                        @click="copyMessageContent(message)"
                        circle 
                        size="small">
                        <i class="fa-solid fa-copy"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip  :content="t('translateAndMark')" placement="bottom">
                      <el-button @click="translateMessage(index)" circle size="small">
                        <i class="fa-solid fa-language"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="index !== 0" :content="t('delete')" placement="bottom">
                      <el-button @click="deleteMessage(index)" circle size="small">
                        <i class="fa-solid fa-trash-can"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="index == 0" :content="t('reset')" placement="bottom">
                      <el-button @click="resetMessage(index)" circle size="small">
                        <i class="fa-solid fa-rotate"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="message.role === 'system'" :content="t('oneClickExpand')" placement="bottom">
                      <el-button 
                        class="Gen-btn" 
                        @click="toggleQuickGen(index)"
                        :disabled="isQuickGenerating"
                        circle 
                        size="small">
                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                      </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="message.role === 'system'" :content="t('save')" placement="bottom">
                      <el-button 
                        class="Gen-btn" 
                        @click="saveSystemPrompt(index)"
                        :disabled="isQuickGenerating"
                        circle 
                        size="small">
                        <i class="fa-solid fa-floppy-disk"></i>
                      </el-button>
                    </el-tooltip>
                    <span class="msg-status" v-if="message.role === 'assistant' && !isMobile">
                      {{ t('total_tokens')+': '+message?.total_tokens +',    '+ t('first_token_latency')+': '+message?.first_token_latency +'ms,    '+ t('elapsedTime')+': '+message?.elapsedTime + 's'}}
                    </span>
                  </div>
                </div>
              </div>
              
              <div class="button-group">

                <el-tooltip :content="ASRrunning?t('listening'):isTyping?t('typing'):TTSrunning?t('speaking'):t('idle')" placement="top">
                  <el-button
                    v-if="isCapsuleMode"
                    class="icon-btn status-btn"
                    :type="ASRrunning||TTSrunning||isTyping ?  'primary':'default' "
                    circle>
                    <i v-if="ASRrunning" class="fa-solid fa-ear-listen"></i>
                    <i v-else-if="isTyping" class="fa-solid fa-feather-pointed"></i>
                    <i v-else-if="TTSrunning" class="fa-solid fa-head-side-cough"></i>
                    <i v-else class="fa-solid fa-heart"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('clearChat')" placement="top">
                  <el-button
                    v-if="!isCapsuleMode"
                    @click="clearMessages"
                    class="icon-btn clear-btn"
                    type="danger"
                    circle>
                    <i class="fa-solid fa-trash"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('mainModel')" placement="top">
                  <el-button
                    v-if="!isCapsuleMode"
                    plain
                    circle
                    class="icon-btn model-btn"
                    @click="showModelDialog = true"
                  >
                    <template #icon>
                      <img
                        :src="getVendorLogo(selectedVendor?.vendor || 'unknown')"
                        class="model-vendor-logo"
                        draggable="false"
                      />
                    </template>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('chatHistory')" placement="top">
                  <el-button
                    v-if="!isCapsuleMode"
                    @click="showHistoryDialog = true"
                    class="icon-btn history-btn"
                    :type="conversations.length === 0 ? 'default' : 'primary'"
                    circle>
                    <i class="fa-solid fa-clock-rotate-left"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('extension')" placement="top">
                  <el-button
                    v-if="!isCapsuleMode&&!isAssistantMode"
                    @click="openExtensionsDialog"
                    class="icon-btn history-btn"
                    :type="!sidePanelURL ? 'default' : 'primary'"
                    circle>
                    <i class="fa-solid fa-puzzle-piece"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="allBriefly ? t('allNoBriefly'):t('allBriefly')" placement="top">
                  <el-button
                    @click="handleAllBriefly"
                    class="icon-btn history-btn"
                    v-if="MoreButtonDict.find(b => b.name === 'brieflyButton')?.enabled&&!isCapsuleMode"
                    :type="allBriefly ? 'primary' : 'default'"
                    circle>
                    <i class="fa-solid fa-asterisk"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="isInputExpanded ? t('collapseInput') : t('expandInput')" placement="top">
                    <el-button 
                        @click="toggleInputExpand"
                        class="icon-btn expand-btn"
                        v-if="MoreButtonDict.find(b => b.name === 'expandButton')?.enabled&&!isCapsuleMode"
                        :type="isInputExpanded ? 'primary' : 'default'"
                        circle>
                        <i :class="isInputExpanded ? 'fa-solid fa-down-left-and-up-right-to-center' : 'fa-solid fa-up-right-and-down-left-from-center'"></i>
                    </el-button>
                </el-tooltip>

                <el-tooltip :content="t('uploadFile')" placement="top">
                  <el-button
                    @click="sendFiles"
                    class="icon-btn file-btn"
                    :type="hasFiles ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'fileButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-paperclip"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('uploadImage')" placement="top">
                  <el-button
                    @click="sendImages"
                    class="icon-btn image-btn"
                    :type="hasImages ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'imageButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-image"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('deepThinking')" placement="top">
                  <el-button
                    @click="reasonerSettings.enabled = !reasonerSettings.enabled; autoSaveSettings()"
                    class="icon-btn deep-think-btn"
                    :type="reasonerSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'reasonerButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-atom"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('deepResearch')" placement="top">
                  <el-button
                    @click="toolsSettings.deepsearch.enabled = !toolsSettings.deepsearch.enabled; autoSaveSettings()"
                    class="icon-btn deep-search-btn"
                    :type="toolsSettings.deepsearch.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'deepSearchButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-flask"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('vision')" placement="top">
                  <el-button
                    @click="visionSettings.enabled = !visionSettings.enabled; autoSaveSettings()"
                    class="icon-btn vision-btn"
                    :type="visionSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'visionButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-camera"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('desktopVisionButton')" placement="top">
                  <el-button
                    @click="visionSettings.desktopVision = !visionSettings.desktopVision; autoSaveSettings()"
                    class="icon-btn vision-btn"
                    :type="visionSettings.desktopVision ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'desktopVisionButton')?.enabled||isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-eye"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('screenshot')" placement="top">
                  <el-button
                    @click="toggleScreenshot"
                    class="icon-btn vision-btn"
                    type="default"
                    v-if="MoreButtonDict.find(b => b.name === 'screenshotButton')?.enabled||isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-scissors"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('imgGen')" placement="top">
                  <el-button
                    @click="text2imgSettings.enabled = !text2imgSettings.enabled; autoSaveSettings()"
                    class="icon-btn text2img-btn"
                    :type="text2imgSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'text2imgButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-pencil"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('asr')" placement="top">
                  <el-button
                    @click="toggleASR"
                    class="icon-btn asr-btn"
                    :type="asrSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'asrButton')?.enabled||isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-microphone"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('tts')" placement="top">
                  <el-button
                    @click="ttsSettings.enabled=!ttsSettings.enabled;changeTTSstatus();"
                    class="icon-btn asr-btn"
                    :type="ttsSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'ttsButton')?.enabled||isCapsuleMode"
                    circle>
                    <i v-if="ttsSettings.enabled" class="fa-solid fa-volume-high"></i>
                    <i v-else class="fa-solid fa-volume-xmark"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('knowledgeBase')" placement="top">
                  <el-button
                    @click="showKnowledgeDialog = true"
                    class="icon-btn knowledge-base-btn"
                    :type="hasEnabledKnowledgeBases ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'knowledgeBaseButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-book"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('webSearch')" placement="top">
                  <el-button
                    @click="webSearchSettings.enabled = !webSearchSettings.enabled; autoSaveSettings()"
                    class="icon-btn web-search-btn"
                    :type="webSearchSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'webSearchButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-globe"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('memory')" placement="top">
                  <el-button
                    @click="showMemoryDialog = true"
                    class="icon-btn web-search-btn"
                    :type="memorySettings.is_memory ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'memoryButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-brain"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('interpreter')" placement="top">
                  <el-button
                    @click="codeSettings.enabled = !codeSettings.enabled; autoSaveSettings()"
                    class="icon-btn web-search-btn"
                    :type="codeSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'codeButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-code"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('CLItool')" placement="top">
                  <el-button
                    :disabled="!isElectron"
                    @click="CLISettings.enabled = !CLISettings.enabled; autoSaveSettings()"
                    class="icon-btn web-search-btn"
                    :type="CLISettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'CLIButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-terminal"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('sticker')" placement="top">
                  <el-button
                    @click="showStickerPacksDialog = true"
                    class="icon-btn sticker-btn"
                    :type="hasEnabledStickerPacks ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'stickerButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-face-smile"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('homeAssistant')" placement="top">
                  <el-button
                    @click="HASettings.enabled = !HASettings.enabled; changeHAEnabled();"
                    class="icon-btn homeAssistant-btn"
                    :type="HASettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'haButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-house"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('browserControl')" placement="top">
                  <el-button
                    @click="chromeMCPSettings.enabled = !chromeMCPSettings.enabled; changeChromeMCPEnabled();"
                    class="icon-btn browserControl-btn"
                    :type="chromeMCPSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'chromeButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-brands fa-chrome"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('sqlControl')" placement="top">
                  <el-button
                    @click="sqlSettings.enabled = !sqlSettings.enabled; changeSqlEnabled();"
                    class="icon-btn sqlControl-btn"
                    :type="sqlSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'sqlButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-database"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('agentSnapshot')" placement="top">
                  <el-button
                    @click="showAgentDialog = true"
                    class="icon-btn agent-btn"
                    :type="hasAgentChanges ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'agentButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-robot"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('llmTools')" placement="top">
                  <el-button
                    @click="showLLMToolsDialog = true"
                    class="icon-btn llm-tool-btn"
                    :type="hasEnabledLLMTools ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'llmButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-cube"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('mcpServers')" placement="top">
                  <el-button
                    @click="showMCPServerDialog = true"
                    class="icon-btn mcp-btn"
                    :type="hasEnabledMCPServers ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'mcpButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-server"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('a2aServers')" placement="top">
                  <el-button
                    @click="this.showA2AServerDialog = true"
                    class="icon-btn a2a-btn"
                    :type="hasEnabledA2AServers ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'a2aButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-network-wired"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('customHttpTool')" placement="top">
                  <el-button
                    @click="this.showHttpToolDialog = true"
                    class="icon-btn http-btn"
                    :type="hasEnabledHttpTools ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'httpButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-wifi"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('ComfyUI')" placement="top">
                  <el-button
                    @click="this.showComfyUIDialog = true"
                    class="icon-btn comfyui-btn"
                    :type="hasEnabledComfyUI ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'comfyuiButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-palette"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('tablePet')" placement="top">
                  <el-button
                    @click="startVRM"
                    class="icon-btn vrm-btn"
                    :type="'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'vrmButton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i :class='isVRMStarting? "fa-solid fa-spinner fa-spin" : "fa-solid fa-user-ninja"'></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="t('enableAutoBehavior')" placement="top">
                  <el-button
                    @click="behaviorSettings.enabled=!behaviorSettings.enabled; autoSaveSettings();"
                    class="icon-btn behavior-btn"
                    :type="behaviorSettings.enabled ? 'primary' : 'default'"
                    v-if="MoreButtonDict.find(b => b.name === 'behaviorBotton')?.enabled&&!isCapsuleMode"
                    circle>
                    <i class="fa-solid fa-person-running"></i>
                  </el-button>
                </el-tooltip>

                <el-tooltip :content="isSending ? t('stopGenerating') : t('sendMessage')" placement="top">
                  <el-button
                    v-if="!isCapsuleMode"
                    @click="isSending ? stopGenerate() : sendMessage()"
                    :type="isSending ? 'danger' : 'primary'"
                    class="icon-btn send-btn"
                    circle>
                    <i :class="isSending ? 'fa-solid fa-stop' : 'fa-solid fa-paper-plane'" aria-hidden="true"></i>
                  </el-button>
                </el-tooltip>
                <!--展开收起按钮-->
                <el-tooltip :content="t('moreButton')" placement="top">
                  <el-button v-if="!isCapsuleMode" @click="showMoreButtonDialog = true" class="icon-btn collapse-btn" circle>
                    <i class="fa-solid fa-ellipsis"></i>
                  </el-button>
                </el-tooltip>
              </div>
              <div class="input-container"  v-if="!isCapsuleMode">
                <!-- 紧凑型文件列表 -->
                <div class="compact-file-list" v-if="allItems.length">
                  <div v-for="(item, index) in allItems" :key="index" class="compact-file-item">
                    <span class="file-name">@{{ item.name }}</span>
                    <el-button
                      @click.stop="removeItem(index, item.type)"
                      class="delete-icon"
                      circle
                    >
                      <i class="fa-solid fa-trash"></i>
                    </el-button>
                  </div>
                </div>
                <el-input
                    v-model="userInput"
                    type="textarea"
                    :rows="isMobile?(isInputExpanded ? 8 : 3):(isInputExpanded ? 16 : 4)"
                    :placeholder="t('inputMessage')"
                    resize="none"
                    @keydown="isInputting=true;handleKeyDown()"
                    @keyup="isInputting=false"
                    class="input-box">
                </el-input>
              </div>
            </div>
            <!-- 可拖拽的分割条 -->
            <div
              v-if="!isCapsuleMode && !isAssistantMode && !isMobile"
              class="resizer"
              ref="resizerRef"
              :class="{ 
                'resizer-collapsed-right': !sidePanelOpen,
                'resizer-collapsed-left': !chatAreaOpen
              }"
              @mousedown="startResize"
              @click="handleResizerClick"
            >
              <div class="resizer-handle">
                <div class="resizer-dots">
                  <div class="dot"></div>
                  <div class="dot"></div>
                  <div class="dot"></div>
                </div>
                <!-- 展开按钮（当对话区收起时显示） -->
                <div v-if="!chatAreaOpen" class="expand-chat-btn" @click.stop="expandChatArea">
                  <i class="fa-solid fa-chevron-right"></i>
                </div>
                <!-- 展开按钮（当侧边栏收起时显示） -->
                <div v-if="!sidePanelOpen" class="expand-side-btn" @click.stop="expandSidePanel">
                  <i class="fa-solid fa-chevron-left"></i>
                </div>
              </div>
            </div>

            <!-- 侧边栏区域 -->
            <div class="side-panel" 
                ref="sidePanelRef"
                :class="{ collapsed: !sidePanelOpen }" 
                v-show="sidePanelOpen">
              <div class="side-panel-scroll" ref="messagesPanel" :style="{ overflow: 'hidden' }">
                <iframe class="side-panel-iframe" 
                        v-if="sidePanelURL" 
                        :src="sidePanelURL" 
                        frameborder="0" 
                        allowfullscreen 
                        style="width: 100%; height: 100%;">
                </iframe>
                <div v-else-if="currentExtension" class="loading-container">
                  <div class="loading-content">
                    <i class="fa-solid fa-spinner fa-spin loading-icon"></i>
                    <p class="loading-text">{{t('waitForLoadingExt')}}</p>
                  </div>
                </div>
                <div v-else class="extensions-list" style="margin: 10px;height: 100%;">
                  <!-- 默认视图选项 -->
                  <el-card 
                    class="extension-card default-view-card"
                    :class="{ active: currentExtension === null }"
                    @click="resetToDefaultView()">
                    <div class="extension-info">
                      <h3>{{ t('defaultView') }}</h3>
                      <p>{{ t('defaultViewDescription') }}</p>
                    </div>
                  </el-card>
                  
                  <!-- 分隔线 -->
                  <div class="extensions-divider" v-if="extensions.length > 0">
                    <span>
                      {{ t('availableExtensions') }}
                      <el-link
                        type="primary"
                        :underline="false"
                        href="#" 
                        @click.stop.prevent="switchToExtensionPage" 
                      >
                        <el-icon class="mr-1">
                          <i class="fa-solid fa-puzzle-piece"></i>
                        </el-icon>{{ t('goToExtensionPage') }}
                      </el-link>
                    </span>
                  </div>
                  <!-- 扩展列表 -->
                  <el-empty v-if="extensions.length === 0" :description="t('noExtensionsFound')" ></el-empty>
                    <el-card
                      v-for="ext in extensions"
                      :key="ext.id"
                      class="extension-card"
                      :class="{ active: currentExtension && currentExtension.id === ext.id }"
                      @click="switchExtension(ext)">
                      
                      <!-- 右上角图标 -->
                      <div class="btn-top-right">
                        <el-button
                          type="primary"
                          circle
                          @click.stop="openExtension(ext);switchExtension(ext)">
                          <i class="fa-solid fa-external-link"></i>
                        </el-button>
                      </div>

                      <div class="extension-info">
                        <h3>{{ ext.name }}</h3>
                        <p>{{ ext.description }}</p>
                        <div class="extension-meta">
                          <span>v{{ ext.version }}</span>
                          <span>{{ ext.author }}</span>
                        </div>
                      </div>
                    </el-card>
                </div>
              </div>
            </div>
          </div>
          <el-dialog
            v-model="showEditDialog"
            :title="editType === 'system' ? t('editSystemPrompt') : t('editMessage')"
            width="600px">
            <el-form-item v-if="editType === 'system'" :label="t('selectSystemPrompt')" class="form-item-align" label-position="left">
              <el-select 
                v-model="selectSystemPromptId" 
                :placeholder="t('selectSystemPromptPlaceholder')"
                class="full-width-input"
                @change="changeSystemPrompt"
                >
                <el-option
                  v-for="prompt in SystemPromptsList"
                  :key="prompt.id"
                  :label="prompt.name"
                  :value="prompt.id"
                />
              </el-select>
            </el-form-item>
            <el-input
              v-model="editContent"
              type="textarea"
              :rows="18"
              :placeholder="t('enterContent')"
            ></el-input>
            <template #footer>
              <el-button @click="showEditDialog = false">{{ t('cancel') }}</el-button>
              <el-button @click="switchToSystemPrompts" v-if="editType === 'system'">{{ t('addSystemPrompt') }}</el-button>
              <el-button type="primary" @click="saveEdit">{{ editType === 'user' ? t('modifyAndSend'):t('save') }}</el-button>
            </template>
          </el-dialog>
            <!-- 文件上传对话框 -->
            <el-dialog
              v-model="showUploadDialog"
              :title="currentUploadType==='file' ? t('uploadFile') : t('uploadImage')"
              width="600px"
              :before-close="() => showUploadDialog = false">

              <div class="upload-container">
                <!-- 可点击的拖拽区域 -->
                <div
                  class="drop-zone"
                  @dragover.prevent
                  @drop.prevent="handleDrop"
                  @click="browseFiles"
                >
                  <el-icon :size="50"><upload /></el-icon>
                  <p>{{ t('clickOrDrop') }}</p>
                </div>
              </div>
            </el-dialog>
            <el-dialog
              v-model="showKnowledgeDialog"
              :title="t('knowledgeBaseSelection')"
              width="600px">
              <div class="knowledge-dialog-content">
                <div v-for="kb in knowledgeBases" :key="kb.id" class="knowledge-item">
                  <el-switch v-model="kb.enabled" @change="autoSaveSettings"></el-switch>
                  <div class="knowledge-info">
                    <div class="knowledge-name">{{ kb.name }}</div>
                    <div class="knowledge-desc">{{ kb.introduction || t('noDescription') }}</div>
                  </div>
                </div>
                <div v-if="knowledgeBases.length === 0" class="empty-tip">
                  {{ t('noKnowledgeBase') }}
                  <a href="#" @click.stop.prevent="switchToKnowledgePage">{{ t('goToKnowledgeBase') }}</a>
                  {{ t('add') }}
                </div>
              </div>
            </el-dialog>
          <el-dialog
            v-model="showMemoryDialog"
            :title="t('memory')"
            width="600px">
            <div class="knowledge-dialog-content">
              <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                <el-switch
                  v-model="memorySettings.is_memory"
                  @change="changeMemory"
                ></el-switch>
              </el-form-item>
              <el-form-item :label="t('resultCount')" class="form-item-align">
                <el-slider
                  v-model="memorySettings.memoryLimit"
                  :min="1"
                  :max="20"
                  :step="1"
                  show-input
                  @input="autoSaveSettings"
                />
              </el-form-item>
              <el-form-item :label="t('selectMemory')">
                <el-select 
                  v-model="memorySettings.selectedMemory" 
                  :placeholder="t('selectMemoryPlaceholder')"
                  class="full-width-input"
                  @change="changeMemory"
                  >
                  <el-option
                    v-for="memory in memories"
                    :key="memory.id"
                    :label="memory.name"
                    :value="memory.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="ttsSettings.newtts.length > 0 " :label="t('availableVoice')"></el-form-item>
              <div class="knowledge-dialog-content">
                <div v-for="(config, name) in ttsSettings.newtts" :key="name" class="knowledge-item">
                  <el-switch v-model="config.enabled" @change="autoSaveSettings"></el-switch>
                  <div class="knowledge-info">
                    <div class="knowledge-name">{{ name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showAgentDialog"
            :title="t('agentSettings')"
            width="600px">
            <div class="agent-dialog-content">
              <!-- 主智能体选择 -->
              <div class="agent-section">
                <h3>{{ t('mainAgent') }}</h3>
                <el-select 
                  v-model="mainAgent"
                  @change="changeMainAgent">
                  <el-option
                    :label="t('defaultAgent')"
                    value="super-model"
                  >
                  </el-option>
                  <el-option
                    v-for="(agent, id) in agents"
                    :key="id"
                    :label="agent.name"
                    :value="id"
                  >
                  </el-option>
                </el-select>
              </div>
              <!-- 工具智能体选择 -->
              <div class="agent-section">
                <h3>{{ t('toolAgents') }}</h3>
                <div 
                  v-for="(agent, id) in agents" 
                  :key="id"
                  class="knowledge-item">
                  <el-switch 
                    v-model="agent.enabled"
                    @change="autoSaveSettings">
                  </el-switch>
                  <div class="knowledge-info">
                    <div class="knowledge-name">{{ agent.name }}</div>
                  </div>
                </div>
                <div v-if="Object.keys(agents).length === 0" class="empty-tip">
                  {{ t('noagents') }}
                  <a href="#" @click.stop.prevent="switchToagents">{{ t('goToagents') }}</a>
                  {{ t('add') }}
                </div>
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showMCPServerDialog"
            :title="t('mcpServersManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <!-- 服务器列表 -->
              <div v-for="(server, name) in mcpServers" :key="name" class="knowledge-item">
                <el-switch 
                  :active-value="false"  
                  :inactive-value="true" 
                  v-model="server.disabled" 
                  :disabled="server.processingStatus === 'server_error'"
                  @change="autoSaveSettings">
                </el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ name }}</div>
                </div>
              </div>
              <div v-if="Object.keys(mcpServers).length === 0" class="empty-tip">
                {{ t('nomcpServers') }}
                <a href="#" @click.stop.prevent="switchTomcpServers">{{ t('goTomcpServers') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showA2AServerDialog"
            :title="t('a2aServersManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(server, url) in a2aServers" :key="url" class="knowledge-item">
                <el-switch v-model="server.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ server.name }}</div>
                  <div class="knowledge-desc">{{ server.description }}</div>
                </div>
              </div>
              <div v-if="Object.keys(a2aServers).length === 0" class="empty-tip">
                {{ t('noA2AServers') }}
                <a href="#" @click.stop.prevent="switchToa2aServers">{{ t('addA2AServer') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showLLMToolsDialog"
            :title="t('llmToolsManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(tool, index) in llmTools" :key="index" class="knowledge-item">
                <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ tool.name }}</div>
                  <div class="knowledge-desc">{{ tool.description || t('noDescription') }}</div>
                </div>
                <el-button 
                  @click="removeLLMTool(index)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="llmTools.length === 0" class="empty-tip">
                {{ t('noLLMTools') }}
                <a href="#" @click.stop.prevent="switchTollmTools">{{ t('gollmTools') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showComfyUIDialog"
            :title="t('ComfyUIManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(tool, index) in workflows" :key="index" class="knowledge-item">
                <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ tool.original_filename }}</div>
                  <div class="knowledge-desc">{{ tool.description || t('noDescription') }}</div>
                </div>
                <el-button 
                  @click="deleteWorkflow(tool.unique_filename)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="workflows.length === 0" class="empty-tip">
                {{ t('noWorkflows') }}
                <a href="#" @click.stop.prevent="switchToComfyui">{{ t('goComfyui') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showStickerPacksDialog"
            :title="t('StickerPackManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(pack, index) in stickerPacks" :key="index" class="knowledge-item">
                <el-switch v-model="pack.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ pack.name }}</div>
                </div>
                <el-button 
                  @click="deleteStickerPack(pack)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="stickerPacks.length === 0" class="empty-tip">
                {{ t('noStickerPack') }}
                <a href="#" @click.stop.prevent="switchToStickerPacks">{{ t('goStickerPack') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showMoreButtonDialog"
            :title="t('showMoreButton')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(config, index) in MoreButtonDict" :key="index" class="knowledge-item">
                <el-switch v-model="config.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ t(config.name) }}</div>
                </div>
              </div>
            </div>
          </el-dialog>

          <el-dialog
            v-model="showHistoryDialog"
            :title="t('chatHistory')"
            width="600px">
            <div class="knowledge-dialog-content">
              <!-- 搜索框与操作按钮行 -->
              <div class="search-action-row">
                <el-input
                  v-model="searchKeyword"
                  :placeholder="t('searchChatHistoryPlaceholder')"
                  clearable
                  class="search-input"
                  style="flex:1">
                  <template #prefix>
                    <el-icon><i class="fa-solid fa-magnifying-glass"></i></el-icon>
                  </template>
                </el-input>

                <div class="action-buttons">
                  <el-tooltip 
                    :content="t('keepLastWeek')" 
                    placement="top"
                    :disabled="conversations.length === 0">
                    <el-button 
                      type="info"
                      circle 
                      size="small"
                      @click="keepLastWeek"
                      :disabled="conversations.length === 0">
                      <i class="fa-solid fa-calendar-week"></i>
                    </el-button>
                  </el-tooltip>

                  <el-tooltip 
                    :content="t('clearAllHistory')" 
                    placement="top"
                    :disabled="conversations.length === 0">
                    <el-button 
                      type="danger"
                      circle 
                      size="small"
                      @click="confirmClearAll"
                      :disabled="conversations.length === 0">
                      <i class="fa-solid fa-trash-can"></i>
                    </el-button>
                  </el-tooltip>
                </div>
              </div>

              <!-- 对话记录列表 -->
              <div v-for="conv in filteredConversations" 
                  :key="conv.id" 
                  class="knowledge-item"
                  @click="loadConversation(conv.id)">
                <el-button 
                  @click.stop="confirmDeleteConversation(conv.id)"
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
                <div class="knowledge-info">
                  <h3 class="knowledge-name">{{ conv.title || t('untitled') }}</h3>
                  <div class="knowledge-desc">
                    <el-icon class="meta-icon"><i class="fa-solid fa-message"></i></el-icon>
                    <span>{{ conv.messages?.length || 0 }} {{ t('messages') }}</span><br>
                    <el-icon class="meta-icon"><i class="fa-solid fa-clock"></i></el-icon>
                    <span>{{ formatDate(conv.timestamp) }}</span>
                  </div>
                </div>
              </div>

              <!-- 空状态提示 -->
              <div v-if="filteredConversations.length === 0" class="empty-tip">
                {{ searchKeyword ? t('noResults') : t('noChatHistory') }}
              </div>
            </div>
          </el-dialog>
        </div>

        <div v-show="activeMenu === 'role'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧二级导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in roleTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容区 -->
            <div class="suite-content">
              <!-- 角色卡 -->
              <div v-show="subMenu === 'memory'" class="page">
                <el-tabs v-model="activeMemoryTab">
                  <!-- 记忆配置标签页 -->
                  <el-tab-pane :label="t('memoryConfig')" name="config">
                    <el-form :model="memorySettings" class="settings-form"  label-position="top">
                      <div class="tool-item">
                        <div class="tool-header">
                          <div class="header-left">
                            <span>
                              <el-icon>
                                <i class="fa-solid fa-brain"></i>
                              </el-icon>
                              {{ t('memory') }}
                              <el-link
                                type="primary"
                                :underline="false"
                                href="https://github.com/SillyTavern/SillyTavern" 
                                target="_blank"
                              >
                                <el-icon class="mr-1">
                                  <i class="fa-solid fa-key"></i>
                                </el-icon>{{ t('gotoGithub') }}
                              </el-link>
                            </span>
                          </div>
                          <el-switch v-model="memorySettings.is_memory" @click.stop @change="changeMemory"/>
                        </div>
                        <div class="tool-content">
                          <el-form-item :label="t('memoryResultCount')" class="form-item-align">
                            <el-slider
                              v-model="memorySettings.memoryLimit"
                              :min="1"
                              :max="20"
                              :step="1"
                              show-input
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-alert type="info" :closable="false" class="mb-2">
                            <template #default>
                              <div class="alert-content">
                                {{ t('longTermMemoryNote') }}
                              </div>
                            </template>
                          </el-alert>
                          <el-form-item :label="t('selectMemory')">
                            <el-select 
                              v-model="memorySettings.selectedMemory" 
                              :placeholder="t('selectMemoryPlaceholder')"
                              class="full-width-input"
                              @change ="changeMemory"
                              >
                              <el-option
                                v-for="memory in memories"
                                :key="memory.id"
                                :label="memory.name"
                                :value="memory.id"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item :label="t('userName')" class="form-item-align">
                            <el-input
                              v-model="memorySettings.userName"
                              :placeholder="t('userNamePlaceholder')"
                              @input="autoSaveSettings"
                              class="full-width-input"
                            />
                          </el-form-item>
                          <el-form-item :label="t('genericSystemPrompt')" class="form-item-align">
                            <el-input
                              v-model="memorySettings.genericSystemPrompt"
                              :placeholder="t('genericSystemPromptPlaceholder')"
                              type="textarea"
                              :rows="3"
                              @input="autoSaveSettings"
                              class="full-width-input"
                            />
                          </el-form-item>
                        </div>
                      </div>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('minilmNotice3') }}
                          </div>
                        </template>
                      </el-alert>
                      <!-- Minilm ONNX 卡片 -->
                      <el-card
                        shadow="hover"
                        class="sherpa-card"
                      >
                        <!-- 卡片头部：标题 + 安装状态 -->
                        <div class="card-header d-flex justify-content-between align-items-center">
                          <!-- 左侧标题 -->
                          <span><strong>Paraphrase Multilingual MiniLM L12 v2</strong></span>

                          <!-- 右侧 tag 组 -->
                          <div class="d-flex gap-2">
                            <el-tag type="info" effect="dark">
                              224MB
                            </el-tag>

                            <el-tag
                              :type="minilmModelExists ? 'success' : 'info'"
                              effect="dark"
                            >
                              {{ minilmModelExists ? t('installed') : t('notInstalled') }}
                            </el-tag>
                          </div>
                        </div>


                        <!-- 操作按钮区 -->
                        <div class="card-actions">
                          <!-- 左侧：两个下载按钮 -->
                          <div class="left-actions">
                            <el-button
                              type="primary"
                              :disabled="minilmModelExists || minilmDownloading"
                              :loading="minilmDownloading && source==='modelscope'"
                              @click="minilmDownload('modelscope')"
                            >
                              {{ t('downloadFromModelScope') }}
                            </el-button>

                            <el-button
                              type="primary"
                              :style="{ margin: '0' }"
                              :disabled="minilmModelExists || minilmDownloading"
                              :loading="minilmDownloading && source==='huggingface'"
                              @click="minilmDownload('huggingface')"
                            >
                              {{ t('downloadFromHuggingFace') }}
                            </el-button>
                          </div>

                          <!-- 右侧：删除按钮 -->
                          <el-button
                            v-if="minilmModelExists"
                            type="danger"
                            @click="minilmRemove"
                          >
                            {{ t('deleteModel') }}
                          </el-button>
                        </div>


                        <!-- 进度条（固定在底部） -->
                        <el-progress
                          v-if="minilmDownloading"
                          :percentage="minilmPercent"
                          style="margin-top: 16px;"
                          :stroke-width="10"
                        ></el-progress>
                      </el-card>
                    </el-form>
                  </el-tab-pane>
                  <!-- 添加新记忆标签页 -->
                  <el-tab-pane :label="t('addNewMemory')" name="add">
                    <!-- 向量库交互 Dialog -->
                    <el-dialog
                      v-model="vectorDialogVisible"
                      :title="t('vectorInteractTitle') + ' —— ' + vectorDialogMemoryName"
                      width="80%"
                    >
                      <div v-loading="vectorLoading">
                        <el-table :data="vectorTable" stripe height="400">
                          <el-table-column prop="idx" label="#" width="60" ></el-table-column>
                          <el-table-column prop="text" :label="t('memoryText')"></el-table-column>
                          <el-table-column prop="created_at" :label="t('createTime')"width="160"></el-table-column>
                          <el-table-column prop="timetamp" :label="t('lastTime')" width="160" ></el-table-column>
                          <el-table-column width="100">
                            <template #default="{ $index }">
                              <el-button circle @click="startEditRow($index)">
                                <i class="fa-solid fa-pen"></i>
                              </el-button>
                              <el-button circle type="danger" @click="deleteVectorRow(vectorTable[$index].idx)">
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>

                      <!-- 底部统一关闭 -->
                      <template #footer>
                        <el-button @click="vectorDialogVisible = false">{{ t('close') }}</el-button>
                      </template>
                    </el-dialog>

                    <!-- 单行编辑小弹窗 -->
                    <el-dialog
                      v-model="editRowVisible"
                      width="40%"
                      :title="t('editText')"
                    >
                      <el-input v-model="editRowText" type="textarea" :rows="4" ></el-input>
                      <template #footer>
                        <el-button @click="editRowVisible = false">{{ t('cancel') }}</el-button>
                        <el-button type="primary" @click="submitEditRow">{{ t('confirm') }}</el-button>
                      </template>
                    </el-dialog>

                    <div style="margin-bottom:16px;display:flex;align-items:center;gap:12px;">
                      <!-- 大输入框：限制最大宽度，让出空间给按钮 -->
                      <el-input
                        v-model="quickCreatePrompt"
                        type="textarea"
                        :rows="4"
                        :placeholder="t('quickGenPlaceholder')"
                      >
                      </el-input>
                      <!-- 生成按钮 -->
                      <el-tooltip :content="t('oneClickGenCard')" placement="top">
                        <el-button
                          type="primary"
                          size="large"
                          circle
                          style="margin: 0;"
                          :disabled="!quickCreatePrompt.trim()||isGenerating"
                          @click="handleQuickGen"
                        >
                          <i v-if="!isGenerating" class="fa-solid fa-wand-magic-sparkles"></i>
                          <i v-else class="fa-solid fa-spinner fa-spin"></i>
                        </el-button>
                      </el-tooltip>
                      <el-tooltip :content="t('stopGenCard')" placement="top">
                        <!-- 停止生成按钮 -->
                        <el-button
                          type="danger"
                          size="large"
                          circle
                          style="margin: 0;"
                          :disabled="!isGenerating"
                          @click="stopQuickGen"
                        >
                          <i class="fa-solid fa-stop"></i>
                        </el-button>
                      </el-tooltip>
                    </div>
                    <div class="provider-grid">
                      <!-- 已有记忆磁贴 -->
                      <div class="provider-card knowledge-card" v-for="memory in memories" :key="memory.id">
                        <div class="card-header">
                          <img 
                            :src="memory.avatar? memory.avatar : 'source/Avatar.png'" 
                            class="mini-vendor-logo"
                          />
                          <div class="card-actions">
                            <el-tooltip :content="t('vectorInteract')" placement="top">
                              <el-button
                                type="warning"
                                circle
                                size="small"
                                @click="openVectorDialog(memory.id)"
                                v-if="memory.providerId"
                              >
                                <i class="fa-solid fa-brain"></i>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('downloadMemory')" placement="top">
                              <el-button
                                @click="downloadMemory(memory)"
                                type="primary"
                                circle
                                size="small"
                              >
                                <i class="fa-solid fa-download"></i>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('editMemory')" placement="top">
                              <el-button
                                @click="editMemory(memory.id)"
                                :disabled="isGenerating"
                                type="default"
                                circle
                                size="small"
                              >
                                <i class="fa-solid fa-pen-to-square"></i>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('removeMemory')" placement="top">
                              <el-button
                                @click="removeMemory(memory.id)"
                                type="danger"
                                circle
                                size="small"
                              >
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="kb-content">
                          <h3 class="kb-title">{{memory.name }}</h3>
                          <div class="kb-meta">
                            <div class="kb-meta-item">
                              <el-icon class="kb-icon">
                                <i class="fa-solid fa-brain"></i>
                              </el-icon>
                              <span>{{ getVendorName(memory.providerId) }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 添加新记忆磁贴 -->
                      <div class="provider-card add-tile" @click="handleShowAddMemoryDialog">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addNewMemory') }}</div>
                      </div>
                    </div>
                    <!-- 添加记忆对话框 -->
                    <el-dialog v-model="showAddMemoryDialog" :title="t('memoryConfig')" width="80%">
                      <el-form label-position="top">
                        <el-form-item :label="t('memoryName')" required>
                          <el-input v-model="newMemory.name" />
                        </el-form-item>

                        <el-form-item :label="t('avatar')">
                          <el-input v-model="newMemory.avatar" 
                          :placeholder="t('avatarPlaceholder')"/>
                        </el-form-item>

                        <!-- 新增已有记忆选择框 -->
                        <el-form-item :label="t('selectExistingMemory')">
                          <el-select 
                            v-model="selectedExistingMemoryId" 
                            :placeholder="t('selectExistingMemoryPlaceholder')"
                            @change="copyExistingMemoryData"
                            class="full-width-input">
                            <!-- 添加“无”选项，默认选中 -->
                            <el-option
                              :key="'none'"
                              :label="t('none')"
                              :value="null">
                            </el-option>
                            
                            <el-option
                              v-for="memory in memories"
                              :key="memory.id"
                              :label="memory.name"
                              :value="memory.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <div class="upload-container">
                          <div
                            class="drop-zone"
                            @dragover.prevent
                            @drop.prevent="handleJsonDrop"
                            @click="browseJsonFile"
                          >
                            <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                            <p>{{ t('clickOrDropCharacterCards') }}</p>
                          </div>
                        </div>
                        <el-tabs type="border-card" v-model="activeMemoryTabName">

                          <!-- 自动更新设定（供应商） -->
                          <el-tab-pane name="autoUpdateSetting">
                            <template #label>
                              <span>{{ t('autoUpdateSetting') }}</span>
                            </template>
                            <el-form-item :label="t('embeddingProvider')">
                              <el-select
                                v-model="newMemory.providerId"
                                :placeholder="t('selectProvider')"
                                clearable
                                class="full-width-input"
                              >
                                <!-- 添加“无”选项，默认选中 -->
                                <el-option
                                  :key="'none'"
                                  :label="t('none')"
                                  :value="null"
                                >
                                  <div class="provider-option">
                                    <img 
                                      src="source/providers/logo.png" 
                                      class="mini-vendor-logo"
                                    />
                                    <span class="model-id">{{ t("NoLongTermMemory") }}</span>
                                  </div>
                                </el-option>
                                <el-option
                                  key='paraphrase-multilingual-MiniLM-L12-v2'
                                  :label="t('localVendor') + ' - ' + 'paraphrase-multilingual-MiniLM-L12-v2'"
                                  value='paraphrase-multilingual-MiniLM-L12-v2'
                                >
                                  <div class="provider-option">
                                    <img 
                                      :src="getVendorLogo('Local')" 
                                      class="mini-vendor-logo"
                                    />
                                    <span class="model-id">paraphrase-multilingual-MiniLM-L12-v2</span>
                                  </div>
                                </el-option>
                                <el-option
                                  v-for="p in modelProviders"
                                  :key="p.id"
                                  :label="p.vendor + ' - ' + p.modelId"
                                  :value="p.id"
                                >
                                  <div class="provider-option">
                                    <img :src="getVendorLogo(p.vendor)" class="mini-vendor-logo" />
                                    <span class="model-id">{{ p.modelId }}</span>
                                  </div>
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-alert type="info" :closable="false" class="mb-2">
                              <template #default>
                                <div class="alert-content">
                                  {{ t('minilmNotice4') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToMemoryConfig"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('goToMemory') }}
                                  </el-link><br>
                                  {{ t('firstTimeUse') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToApiBox"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('keyBoxInterface') }}
                                  </el-link>
                                  {{ t('addProviderReturnSelect') }}
                                  {{ t('addemdNotice') }}
                                  {{ t('autoUpdateSettingNote') }}
                                </div>
                              </template>
                            </el-alert>
                          </el-tab-pane>

                          <!-- 角色描述 -->
                          <el-tab-pane name="description" :label="t('characterDescription')">
                            <el-form-item>
                              <el-input
                                v-model="newMemory.description"
                                type="textarea"
                                :rows="8"
                                :placeholder="t('characterDescriptionPlaceholder')"
                              />
                            </el-form-item>
                          </el-tab-pane>

                          <!-- 性格 -->
                          <el-tab-pane name="personality" :label="t('personality')">
                            <el-form-item>
                              <el-input
                                v-model="newMemory.personality"
                                type="textarea"
                                :rows="8"
                                :placeholder="t('personalityPlaceholder')"
                              />
                            </el-form-item>
                          </el-tab-pane>

                          <!-- 对话示例（一问一答） -->
                          <el-tab-pane name="mesExample" :label="t('mesExample')">
                            <el-form-item>
                              <el-input
                                v-model="newMemory.mesExample"
                                type="textarea"
                                :rows="8"
                                :placeholder="t('mesExamplePlaceholder')"
                              />
                            </el-form-item>
                          </el-tab-pane>

                          <!-- 系统提示 -->
                          <el-tab-pane name="systemPrompt" :label="t('systemPrompt')">
                            <el-form-item>
                              <el-input
                                v-model="newMemory.systemPrompt"
                                type="textarea"
                                :rows="8"
                                :placeholder="t('systemPromptPlaceholder')"
                              />
                            </el-form-item>
                          </el-tab-pane>

                          <el-tab-pane name="characterBook" :label="t('characterBook')">
                            <div
                              v-for="(item, idx) in newMemory.characterBook"
                              :key="idx"
                              style="margin-bottom:12px;border:1px solid;border-radius:4px;padding:8px"
                            >
                              <el-form-item :label="t('keys')">
                                <el-input
                                  v-model="item.keysRaw"
                                  type="textarea"
                                  :rows="3"
                                  :placeholder="t('keysPlaceholder')"
                                />
                              </el-form-item>
                              <el-form-item :label="t('content')">
                                <el-input
                                  v-model="item.content"
                                  type="textarea"
                                  :rows="4"
                                  :placeholder="t('contentPlaceholder')"
                                />
                              </el-form-item>
                              <div style="text-align:right">
                                <el-button circle size="small" type="default" @click="clearBook(idx)">
                                  <i class="fa-solid fa-eraser"></i>
                                </el-button>
                                <el-button
                                  v-if="newMemory.characterBook.length>1"
                                  circle
                                  size="small"
                                  type="danger"
                                  @click="removeBook(idx)"
                                >
                                  <i class="fa-solid fa-trash"></i>
                                </el-button>
                                <el-button circle size="small" type="primary" @click="addBook">
                                  <i class="fa-solid fa-plus"></i>
                                </el-button>
                              </div>
                            </div>
                          </el-tab-pane>

                          <el-tab-pane name="firstGreeting" :label="t('firstGreeting')">
                            <div
                              class="param-row"
                              style="margin-bottom:12px;border:1px solid;border-radius:4px;padding:8px"
                            >
                              <el-form-item>
                                <el-input
                                  v-model="newMemory.firstMes"
                                  type="textarea"
                                  :rows="3"
                                  :placeholder="t('firstMes')"
                                  
                                />
                              </el-form-item>
                              <div style="text-align:right">
                                <el-button
                                  @click="clearFirstMes"
                                  type="default"
                                  size="small"
                                  circle
                                >
                                  <i class="fa-solid fa-eraser"></i>
                                </el-button>
                                <el-button
                                  @click="addGreeting"
                                  type="primary"
                                  circle
                                  size="small"
                                  class="header-add-btn"
                                >
                                  <i class="fa-solid fa-plus"></i>
                                </el-button>
                              </div>
                            </div>
                            <div
                              v-for="(g, idx) in newMemory.alternateGreetings"
                              :key="idx"
                              class="param-row"
                              style="margin-bottom:12px;border:1px solid #dcdfe6;border-radius:4px;padding:8px"
                            >
                              <el-form-item>
                                <el-input
                                  v-model="newMemory.alternateGreetings[idx]"
                                  type="textarea"
                                  :rows="3"
                                  :placeholder="t('alternateGreeting') + ' ' + (idx + 1)"
                                  
                                />
                              </el-form-item>
                              <div style="text-align:right">
                                <el-button
                                  @click="clearGreeting(idx)"
                                  type="default"
                                  size="small"
                                  circle
                                >
                                  <i class="fa-solid fa-eraser"></i>
                                </el-button>
                                <el-button
                                  @click="removeGreeting(idx)"
                                  type="danger"
                                  size="small"
                                  circle
                                >
                                  <i class="fa-solid fa-trash"></i>
                                </el-button>
                                <el-button
                                  @click="addGreeting"
                                  type="primary"
                                  circle
                                  size="small"
                                  class="header-add-btn"
                                >
                                  <i class="fa-solid fa-plus"></i>
                                </el-button>
                              </div>
                            </div>
                          </el-tab-pane>
                        </el-tabs>
                      </el-form>

                      <template #footer>
                        <el-button @click="showAddMemoryDialog = false">{{ t('cancel') }}</el-button>
                        <el-button 
                          type="primary" 
                          @click="addMemory"
                          :disabled="!newMemory.name">
                          {{ t('confirmAdd') }}
                        </el-button>
                      </template>
                    </el-dialog>
                  </el-tab-pane>
                  <el-tab-pane :label="t('moreCard')" name="card">
                      <!-- 供应商选择区域 -->
                      <el-form-item>
                        <div class="vendor-grid">
                          <div 
                            v-for="item in CardOptions" 
                            :key="item.value"
                            class="vendor-card"
                            @click="goToCardURL(item.value)"
                          >
                            <img 
                              :src="getCardVendorLogo(item.value)" 
                              :alt="item.label"
                              class="vendor-logo"
                            />
                            <div class="vendor-name">{{ t(item.label) }}</div>
                          </div>
                        </div>
                      </el-form-item>
                  </el-tab-pane>
                  <!-- 系统提示词标签页 -->
                  <el-tab-pane :label="t('addSystemPrompt')" name="prompts">
                    <div style="margin-bottom:16px;display:flex;align-items:center;gap:12px;">
                      <!-- 大输入框：限制最大宽度，让出空间给按钮 -->
                      <el-input
                        v-model="quickCreateSystemPrompt"
                        type="textarea"
                        :rows="4"
                        :placeholder="t('quickGenSystemPromptPlaceholder')"
                      >
                      </el-input>
                      <!-- 生成按钮 -->
                      <el-tooltip :content="t('oneClickGenCard')" placement="top">
                        <el-button
                          type="primary"
                          size="large"
                          circle
                          style="margin: 0;"
                          :disabled="!quickCreateSystemPrompt.trim()||isSystemPromptGenerating"
                          @click="handleSystemPromptQuickGen"
                        >
                          <i v-if="!isSystemPromptGenerating" class="fa-solid fa-wand-magic-sparkles"></i>
                          <i v-else class="fa-solid fa-spinner fa-spin"></i>
                        </el-button>
                      </el-tooltip>
                      <el-tooltip :content="t('stopGenCard')" placement="top">
                        <!-- 停止生成按钮 -->
                        <el-button
                          type="danger"
                          size="large"
                          circle
                          style="margin: 0;"
                          :disabled="!isSystemPromptGenerating"
                          @click="stopSystemPromptQuickGen"
                        >
                          <i class="fa-solid fa-stop"></i>
                        </el-button>
                      </el-tooltip>
                    </div>
                    <div class="provider-grid">
                      <!-- 已有提示词磁贴 -->
                      <div
                        class="provider-card knowledge-card"
                        v-for="(prompt, idx) in SystemPromptsList"
                        :key="prompt.id || idx"
                      >
                        <div class="card-header">
                          <el-tooltip :content="t('usePrompt')" placement="top">
                            <el-button 
                              type="primary" 
                              @click="usePrompt(prompt.content)"
                              circle
                            >
                              <i class="fa-solid fa-play"></i>
                            </el-button>
                          </el-tooltip>
                          <div class="card-actions">
                            <el-button
                              @click="editPrompt(prompt)"
                              type="default"
                              circle
                              size="small"
                              :title="t('edit')"
                            >
                              <i class="fa-solid fa-pen-to-square"></i>
                            </el-button>
                            <el-button
                              @click="removePrompt(prompt.id)"
                              type="danger"
                              circle
                              size="small"
                              :title="t('delete')"
                            >
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                        <h3>{{ prompt.name }}</h3>
                        <span>{{ (prompt.content || '').substring(0, 50) }}...</span>
                      </div>

                      <!-- 新增磁贴 -->
                      <div class="provider-card add-tile" @click="addPrompt">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addSystemPrompt') }}</div>
                      </div>
                    </div>

                    <!-- 编辑/新增对话框 -->
                    <el-dialog
                      v-model="showPromptDialog"
                      :title="t('editSystemPrompt')"
                      width="60%"
                    >
                      <el-form label-position="top">
                        <el-form-item :label="t('promptName')" required>
                          <el-input v-model="promptForm.name" />
                        </el-form-item>
                        <el-form-item :label="t('promptContent')" required>
                          <el-input
                            v-model="promptForm.content"
                            type="textarea"
                            :rows="8"
                            :placeholder="t('systemPromptPlaceholder')"
                          />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <el-button @click="showPromptDialog = false">{{ t('cancel') }}</el-button>
                        <el-button type="primary" @click="savePrompt" :disable="!promptForm.name || !promptForm.content">{{ t('confirm') }}</el-button>
                      </template>
                    </el-dialog>
                  </el-tab-pane>
                  <el-tab-pane :label="t('moreSystemPrompt')" name="market">
                      <!-- 供应商选择区域 -->
                      <el-form-item>
                        <div class="vendor-grid">
                          <div 
                            v-for="item in PromptOptions" 
                            :key="item.value"
                            class="vendor-card"
                            @click="goToPromptURL(item.value)"
                          >
                            <img 
                              :src="getPromptVendorLogo(item.value)" 
                              :alt="item.label"
                              class="vendor-logo"
                            />
                            <div class="vendor-name">{{ t(item.label) }}</div>
                          </div>
                        </div>
                      </el-form-item>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <!-- 角色语音 -->
              <div v-show="subMenu === 'voice'" class="page">
                <div class="provider-grid">
                  <!-- 已有 TTS 配置磁贴 -->
                  <div v-for="(config, name) in ttsSettings.newtts" :key="name" class="provider-card knowledge-card">
                    <div class="card-header">
                      <el-switch v-model="config.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button @click="ClickToListen(config.SampleText,name)" type="primary" circle size="small">
                          <i class="fa-solid fa-headphones"></i>
                        </el-button>
                        <el-button @click="editTTS(name)" type="primary" circle size="small">
                          <i class="fa-solid fa-pen-to-square"></i>
                        </el-button>
                        <el-button @click="deleteTTS(name)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <h3 class="kb-title">{{ name }}</h3>
                      <div class="kb-meta">
                        <div class="kb-meta-item">
                          <el-icon class="kb-icon">
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          <span>{{ config.engine }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 添加新 TTS 磁贴 -->
                  <div class="provider-card add-tile" @click="openAddTTSDialog">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewTTS') }}</div>
                  </div>
                </div>

                <!-- 新增 TTS 配置对话框 -->
                <el-dialog v-model="showAddTTSDialog" :title="t('addNewTTS')" width="80%">
                  <el-form ref="form" :model="newTTSConfig" label-position="top">
                    <!-- 名称输入 -->
                    <el-form-item :label="t('ttsName')" required>
                      <el-select 
                        v-model="newTTSConfig.name" 
                        filterable
                        allow-create
                      class="full-width-input">
                        <el-option :label="t('Narrator')" :value="t('Narrator')"></el-option>
                        <el-option
                          v-for="memory in memories"
                          :key="memory.id"
                          :label="memory.name"
                          :value="memory.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <!-- 引擎选择 -->
                    <el-form-item :label="t('ttsEngine')" class="form-item-align">
                      <el-select v-model="newTTSConfig.engine" class="full-width-input">
                        <el-option :label="t('edgetts')" value="edgetts"></el-option>
                        <el-option :label="t('systemtts')" value="systemtts" ></el-option>
                        <el-option label="GPT Sovits" value="GSV"></el-option>
                        <el-option :label="t('openaiLike')" value="openai"></el-option>
                        <el-option :label="t('customTTS')" value="customTTS"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item :label="t('SampleText')" class="server-item">
                      <el-input 
                        v-model="newTTSConfig.SampleText" 
                        :placeholder="t('SampleTextPlaceholder')"
                        class="full-width-input"
                        style="margin-right: 10px;"
                        @change="autoSaveSettings"
                      >
                      </el-input>
                      <el-tooltip :content="t('ClickToListen')" placement="top">
                        <el-button 
                          type="primary" 
                          @click="ClickToListen(newTTSConfig.SampleText)" 
                          circle
                        >
                          <i class="fa-solid fa-headphones"></i>
                        </el-button>
                      </el-tooltip>
                    </el-form-item>

                  <div class="tool-item" v-show="ttsSettings.engine === 'systemtts'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-laptop-code"></i>
                          </el-icon>
                          {{t('sysTTS')}}
                        </span>
                      </div>
                      <div class="header-right">
                         <el-button circle type="primary" @click="fetchSystemVoices" :loading="isLoadingSystemVoices">
                            <i class="fa-solid fa-rotate-right"></i>
                         </el-button>
                      </div>
                    </div>
                    
                    <div class="tool-content">
                      <el-form-item :label="t('TTSRate')" class="form-item-align">
                        <el-slider
                          v-model="newTTSConfig.systemRate"
                          :min="50"
                          :max="400"
                          :step="10"
                          show-input
                          @change="autoSaveSettings">
                        </el-slider>
                      </el-form-item>

                      <el-form-item :label="t('Timbre')" class="form-item-align">
                        <el-select
                          v-model="newTTSConfig.systemVoiceName"
                          class="full-width-input"
                          :loading="isLoadingSystemVoices"
                          @change="autoSaveSettings"
                        >
                          <el-option
                            v-for="voice in systemVoices"
                            :key="voice.id"
                            :label="voice.name"
                            :value="voice.id"
                          >
                            <span style="float: left">{{ voice.name }}</span>
                            <span
                              style="
                                float: right;
                                color: var(--el-text-color-secondary);
                                font-size: 13px;
                              "
                            >
                              {{ voice.lang }}
                            </span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      
                      <div v-if="systemVoices.length === 0 && !isLoadingSystemVoices" style="color: #e6a23c; font-size: 12px; margin-top: 5px;">
                        <i class="fa-solid fa-triangle-exclamation"></i> {{t('noSystemVoiceDetected')}}
                      </div>
                    </div>
                  </div>

                    <div class="tool-item" v-show="newTTSConfig.engine === 'openai'">
                      <div class="tool-header">
                        <div class="header-left">
                          <span>
                            <el-icon>
                              <i class="fa-solid fa-microphone"></i>
                            </el-icon>
                            {{t('openaiLike')}}
                          </span>
                        </div>
                      </div>
                      <div class="tool-content">
                        <el-form-item :label="t('TTSModelProvider')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.selectedProvider"
                            :placeholder="t('selectProvider')"
                            filterable
                            @change="selectTTSProvider"
                            @visible-change="handleTTSProviderVisibleChange"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="provider in modelProviders"
                              :key="provider.id"
                              :label="provider.vendor+' - '+provider.modelId"
                              :value="provider.id"
                            >
                              <div class="provider-option">
                                <img 
                                  :src="getVendorLogo(provider.vendor)" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">{{ provider.modelId }}</span>
                              </div>
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item :label="t('openaiStream')" class="form-item-align" label-position="left">
                          <el-switch 
                            v-model="newTTSConfig.openaiStream" 
                            @change="autoSaveSettings"
                          ></el-switch>
                        </el-form-item>
                        <el-form-item :label="t('TTSVoice')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.openaiVoice"
                            :placeholder="t('selectVoice')"
                            filterable
                            allow-create
                            @change="autoSaveSettings"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="voice in openaiVoices"
                              :key="voice"
                              :label="voice"
                              :value="voice"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <!-- 提示音频选择框 -->
                        <el-form-item :label="t('gsvPromptAudio')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.gsvRefAudioPath"
                            @change="handleRefAudioPathChange"
                            class="full-width-input"
                          >
                            <el-option :key="null" :value="null" :label="t('noRefAudio')"></el-option>
                            <el-option
                              v-for="audio in ttsSettings.gsvAudioOptions"
                              :key="audio.path"
                              :label="audio.name"
                              :value="audio.path"
                            >
                              <div class="model-option-item">
                                <span>{{ audio.name }}</span>
                                <i 
                                  class="fa-solid fa-trash-can"
                                  style="color: #ff0000"
                                  @click.stop="deleteAudioOption(audio.path)"
                                ></i>
                              </div>
                            </el-option>
                            
                          </el-select>
                        </el-form-item>
                        <!-- 语速滑动条 -->
                        <el-form-item :label="t('TTSRate')" class="form-item-align">
                          <el-slider
                            v-model="newTTSConfig.openaiSpeed"
                            :min="0.1"
                            :max="2"
                            :step="0.1"
                            show-input
                            @change="autoSaveSettings">
                        </el-form-item>
                      </div>
                      <el-button 
                        @click="showGsvRefAudioPathDialog = true;currentUploadType='audio'"
                        type="primary" 
                        class="add-server-btn">
                        <i class="fa-solid fa-plus"></i> {{ t('addRefAudio') }}
                      </el-button>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('firstTimeUse') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              class="font-medium"
                              @click="switchToApiBox"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('keyBoxInterface') }}
                            </el-link>
                            {{ t('addProviderReturnSelect') }}
                            {{ t('addTTSNotice') }}
                          </div>
                        </template>
                      </el-alert>
                    </div>

                    <div class="tool-item" v-show="newTTSConfig.engine === 'customTTS'">
                      <div class="tool-header">
                        <div class="header-left">
                          <span>
                            <el-icon>
                              <i class="fa-solid fa-volume-high"></i>
                            </el-icon>
                            {{t('customTTS')}}
                          </span>
                        </div>
                      </div>
                      <div class="tool-content">
                          <el-form-item :label="t('customTTSserver')" class="form-item-align">
                            <el-input
                              v-model="newTTSConfig.customTTSserver"
                              :placeholder="t('customTTSServerPlaceholder')"
                              @input="autoSaveSettings"
                              type="textarea"
                            />
                          </el-form-item>
                          <el-form-item :label="t('customStream')" class="form-item-align" label-position="left">
                            <el-switch 
                              v-model="newTTSConfig.customStream" 
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>
                          
                          <el-form-item :label="t('customTTSspeaker')" class="form-item-align">
                              <el-input
                                  v-model="newTTSConfig.customTTSspeaker"
                                  :placeholder="t('customTTSspeakerPlaceholder')"
                                  @input="autoSaveSettings"
                                  class="full-width-input"
                              />
                          </el-form-item>
                          <el-form-item :label="t('customTTSspeed')" class="form-item-align">
                              <el-slider
                                  v-model="newTTSConfig.customTTSspeed"
                                  :min="0.1"
                                  :max="2"
                                  :step="0.1"
                                  show-input
                                  @change="autoSaveSettings">
                              </el-slider>
                          </el-form-item>

                          <hr> <div class="advanced-key-config">
                              <div class="tool-header" style="margin-bottom: 10px;">
                                  <div class="header-left">
                                      <span>{{t('customTTSKeyMapping')}}</span>
                                  </div>
                              </div>

                              <el-form-item :label="t('key_text')" class="form-item-align">
                                  <el-input
                                      v-model="newTTSConfig.customTTSKeyText"
                                      placeholder="text"
                                      @input="autoSaveSettings"
                                      class="full-width-input"
                                  />
                              </el-form-item>

                              <el-form-item :label="t('key_speaker')" class="form-item-align">
                                  <el-input
                                      v-model="newTTSConfig.customTTSKeySpeaker"
                                      placeholder="speaker"
                                      @input="autoSaveSettings"
                                      class="full-width-input"
                                  />
                              </el-form-item>

                              <el-form-item :label="t('key_speed')" class="form-item-align">
                                  <el-input
                                      v-model="newTTSConfig.customTTSKeySpeed"
                                      placeholder="speed"
                                      @input="autoSaveSettings"
                                      class="full-width-input"
                                  />
                              </el-form-item>
                          </div>
                      </div>
                    </div>

                    <div class="tool-item" v-show="newTTSConfig.engine === 'edgetts'">
                      <div class="tool-header">
                        <div class="header-left">
                          <span>
                            <el-icon>
                              <i class="fa-solid fa-volume-high"></i>
                            </el-icon>
                            Edge TTS
                          </span>
                        </div>
                      </div>
                      <div class="tool-content">
                        <!-- 语速滑动条 -->
                        <el-form-item :label="t('edgettsRate')" class="form-item-align">
                          <el-slider
                            v-model="newTTSConfig.edgettsRate"
                            :min="0.1"
                            :max="2"
                            :step="0.1"
                            show-input
                            @change="autoSaveSettings">
                        </el-form-item>
                        <!-- 语言选择框 -->
                        <el-form-item :label="t('edgettsLanguage')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.edgettsLanguage"
                            @change="updateNewLanguages"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="language in uniqueNewLanguages"
                              :key="language"
                              :label="language"
                              :value="language"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <!-- 性别选择框 -->
                        <el-form-item :label="t('edgettsGender')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.edgettsGender"
                            @change="updateNewGenders"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="gender in uniqueNewGenders"
                              :key="gender"
                              :label="t(gender)"
                              :value="gender"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <!-- 语音选择框 -->
                        <el-form-item :label="t('edgettsVoice')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.edgettsVoice"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="voice in filteredNewVoices"
                              :key="voice.name"
                              :label="voice.name"
                              :value="voice.name"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                    </div>
                    <div class="tool-item" v-show="newTTSConfig.engine === 'GSV'">
                      <div class="tool-header">
                        <div class="header-left">
                          <span>
                            <el-icon>
                              <i class="fa-solid fa-volume-high"></i>
                            </el-icon>
                            GPT Sovits
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://github.com/RVC-Boss/GPT-SoVITS" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoGithub') }}
                            </el-link>
                          </span>
                        </div>
                      </div>
                      <div class="tool-content">
                        <el-form-item :label="t('gsvServer')" class="form-item-align">
                          <el-input
                            v-model="newTTSConfig.gsvServer"
                            :placeholder="t('gsvServerPlaceholder')"
                            @input="autoSaveSettings"
                            type="textarea"
                          />
                        </el-form-item>

                        <!-- 语速滑动条 -->
                        <el-form-item :label="t('gsvRate')" class="form-item-align">
                          <el-slider
                            v-model="newTTSConfig.gsvRate"
                            :min="0.1"
                            :max="2"
                            :step="0.1"
                            show-input
                            @change="autoSaveSettings">
                        </el-form-item>

                        <el-form-item :label="t('gsvSample_steps')" class="form-item-align">
                          <el-slider
                            v-model="newTTSConfig.gsvSample_steps"
                            :min="1"
                            :max="16"
                            :step="1"
                            show-input
                            @change="autoSaveSettings">
                        </el-form-item>                       

                        <!-- 语言选择框 -->
                        <el-form-item :label="t('gsvTextLang')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.gsvTextLang"
                            @change="autoSaveSettings"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="language in gsvTextLangs"
                              :key="language"
                              :label="t(language)"
                              :value="language"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <!-- 提示语言选择框 -->
                        <el-form-item :label="t('gsvPromptLang')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.gsvPromptLang"
                            @change="autoSaveSettings"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="language in gsvTextLangs"
                              :key="language"
                              :label="t(language)"
                              :value="language"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <!-- 提示音频选择框 -->
                        <el-form-item :label="t('gsvPromptAudio')" class="form-item-align">
                          <el-select
                            v-model="newTTSConfig.gsvRefAudioPath"
                            @change="handleRefAudioPathChange"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="audio in ttsSettings.gsvAudioOptions"
                              :key="audio.path"
                              :label="audio.name"
                               :value="audio.path"
                            >
                              <div class="model-option-item">
                                <span>{{ audio.name }}</span>
                                <i 
                                  class="fa-solid fa-trash-can"
                                  style="color: #ff0000"
                                  @click.stop="deleteAudioOption(audio.path)"
                                ></i>
                              </div>
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-button 
                          @click="showGsvRefAudioPathDialog = true;currentUploadType='audio'"
                          type="primary" 
                          class="add-server-btn">
                          <i class="fa-solid fa-plus"></i> {{ t('addRefAudio') }}
                        </el-button>

                        <el-alert
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          <template #default>
                            <div class="alert-content">
                              {{ t('gsvNotice1') }}<br>
                              {{ t('gsvNotice2') }}
                            </div>
                          </template>
                        </el-alert>
                      </div>
                    </div>

                  </el-form>

                  <template #footer>
                    <el-button @click="showAddTTSDialog = false">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="saveNewTTSConfig" :disabled="!newTTSConfig.name">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 角色形象 -->
              <div v-show="subMenu === 'appearance'" class="page">
                <div class="provider-grid">
                  <!-- 已有 形象 配置磁贴 -->
                  <div v-for="(config, name) in VRMConfig.newVRM" :key="name" class="provider-card knowledge-card">
                    <div class="card-header">
                      <!-- 启动按钮 -->
                      <el-tooltip :content="t('start_table_pet')" placement="top">
                        <el-button 
                          type="primary" 
                          @click="startNewVRM(name)" 
                          circle
                        >
                          <template v-if="isVRMStarting">
                            <i class="fa-solid fa-spinner fa-spin"></i>
                          </template>
                          <template v-else>
                            <i class="fa-solid fa-play"></i>
                          </template>
                        </el-button>
                      </el-tooltip>
                      <div class="card-actions">
                        <el-button @click="editAppearance(name)" type="primary" circle size="small">
                          <i class="fa-solid fa-pen-to-square"></i>
                        </el-button>
                        <el-button @click="deleteAppearance(name)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <h3 class="kb-title">{{ t(name) }}</h3>
                    </div>
                  </div>

                  <!-- 添加新 形象 磁贴 -->
                  <div class="provider-card add-tile" @click="openAddAppearanceDialog()">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewAppearance') }}</div>
                  </div>
                <!-- 新增 形象 配置对话框 -->
                <el-dialog v-model="showAddAppearanceDialog" :title="t('addNewAppearance')" width="80%">
                  <div class="tool-content">
                    <!-- 名称输入 -->
                    <el-form-item :label="t('AppearanceName')" required label-position="top">
                      <el-select 
                        v-model="newAppearanceConfig.name" 
                        filterable
                        allow-create
                      class="full-width-input">
                        <el-option :label="t('Narrator')" value='Narrator'></el-option>
                        <el-option
                          v-for="memory in memories"
                          :key="memory.id"
                          :label="memory.name"
                          :value="memory.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                      <el-form-item :label="t('windowWidth')" class="form-item-align">
                        <el-slider
                          v-model="newAppearanceConfig.windowWidth"
                          :min="450"
                          :max="2560"
                          :step="10"
                          show-input
                          @change="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('windowHeight')" class="form-item-align">
                        <el-slider
                          v-model="newAppearanceConfig.windowHeight"
                          :min="450"
                          :max="2560"
                          :step="10"
                          show-input
                          @change="autoSaveSettings"
                        />
                      </el-form-item>

                      <!-- VRM模型选择框 -->
                      <el-form-item :label="t('selectVrmModel')" label-position="top">
                        <el-select
                          v-model="newAppearanceConfig.selectedModelId"
                          @change="handleModelChange"
                          class="full-width-input"
                        >
                          <!-- 默认模型分组 -->
                          <el-option-group :label="t('defaultModels')">
                            <el-option
                              v-for="model in VRMConfig.defaultModels"
                              :key="model.id"
                              :label="model.name"
                              :value="model.id"
                            >
                              <div class="model-option-item">
                                <!-- 图标在最前 -->
                                <i class="fa-solid fa-star" style="color: #f39c12; margin-right: 6px;"></i>
                                <span>{{ model.name }}</span>
                              </div>
                            </el-option>
                          </el-option-group>

                          <!-- 用户上传模型分组 -->
                          <el-option-group :label="t('userModels')" v-if="VRMConfig.userModels.length > 0">
                            <el-option
                              v-for="model in VRMConfig.userModels"
                              :key="model.id"
                              :label="model.name"
                              :value="model.id"
                            >
                              <div class="model-option-item">
                                <!-- 图标在最前 -->
                                <i
                                  class="fa-solid fa-trash-can"
                                  style="color: #ff0000; margin-right: 6px;"
                                  @click.stop="deleteModelOption(model.id)"
                                ></i>
                                <span>{{ model.name }}</span>
                              </div>
                            </el-option>
                          </el-option-group>
                        </el-select>

                        <!-- 模型上传按钮 -->
                        <el-button
                          @click="showVrmModelDialog = true"
                          type="primary"
                          class="add-server-btn"
                        >
                          <i class="fa-solid fa-plus"></i> {{ t('addVrmModel') }}
                        </el-button>
                      </el-form-item>

                      <!-- VRMA动作选择框（已统一） -->
                      <el-form-item :label="t('selectVrmaMotions')" label-position="top">
                        <el-select
                          v-model="newAppearanceConfig.selectedMotionIds"
                          @change="handleMotionChange"
                          class="full-width-input"
                          multiple
                        >
                          <!-- 默认动作分组 -->
                          <el-option-group :label="t('defaultMotions')">
                            <el-option
                              v-for="motion in VRMConfig.defaultMotions"
                              :key="motion.id"
                              :label="motion.name"
                              :value="motion.id"
                            >
                              <div class="motion-option-item">
                                <i class="fa-solid fa-star" style="color: #f39c12; margin-right: 6px;"></i>
                                <span>{{ motion.name }}</span>
                              </div>
                            </el-option>
                          </el-option-group>

                          <!-- 用户上传动作分组 -->
                          <el-option-group :label="t('userMotions')" v-if="VRMConfig.userMotions.length > 0">
                            <el-option
                              v-for="motion in VRMConfig.userMotions"
                              :key="motion.id"
                              :label="motion.name"
                              :value="motion.id"
                            >
                              <div class="motion-option-item">
                                <i
                                  class="fa-solid fa-trash-can"
                                  style="color: #ff0000; margin-right: 6px;"
                                  @click.stop="deleteMotionOption(motion.id)"
                                ></i>
                                <span>{{ motion.name }}</span>
                              </div>
                            </el-option>
                          </el-option-group>
                        </el-select>

                        <!-- 动作上传按钮 -->
                        <el-button
                          @click="showVrmaMotionDialog = true"
                          type="success"
                          class="add-server-btn"
                        >
                          <i class="fa-solid fa-plus"></i> {{ t('addVrmaMotion') }}
                        </el-button>
                      </el-form-item>
                      
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('vrmNotice1') }}<br>
                            {{ t('vrmNotice2') }}<br>
                            {{ t('vrmNotice3') }}
                          </div>
                        </template>
                      </el-alert>
                  </div>

                  <!-- VRM模型上传对话框 -->
                  <el-dialog
                    v-model="showVrmModelDialog"
                    :title="t('uploadVrmModel')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleVrmModelDrop"
                        @click="browseVrmModelFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropVrm') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newVrmModel.name">
                        <div class="compact-file-item">
                          <span class="file-name">{{ newVrmModel.name }}</span>
                          <el-button
                            @click.stop="removeNewVrmModel"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newVrmModel.displayName"
                        :label="t('modelDisplayName')"
                        :placeholder="t('modelDisplayNamePlaceholder')"
                        required
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelVrmModelUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadVrmModel" :disabled="!newVrmModel.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>

                  <!-- VRMA动作上传对话框 -->
                  <el-dialog
                    v-model="showVrmaMotionDialog"
                    :title="t('uploadVrmaMotion')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleVrmaMotionDrop"
                        @click="browseVrmaMotionFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropVrma') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newVrmaMotion.name">
                        <div class="compact-file-item">
                          <span class="file-name">{{ newVrmaMotion.name }}</span>
                          <el-button
                            @click.stop="removeNewVrmaMotion"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newVrmaMotion.displayName"
                        :label="t('motionDisplayName')"
                        :placeholder="t('motionDisplayNamePlaceholder')"
                        required
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelVrmaMotionUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadVrmaMotion" :disabled="!newVrmaMotion.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>
                  <template #footer>
                    <el-button @click="showAddAppearanceDialog = false">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="saveNewAppearanceConfig" :disabled="!newAppearanceConfig.name">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
                </div>
              </div>
              <!-- 角色行为 -->
              <div v-show="subMenu === 'behavior'" class="page">
                <el-tabs v-model="activeBehaviorTab">
                  <!-- 角色行为标签页 -->
                  <el-tab-pane :label="t('behaviorConfig')" name="config">
                    <el-form :model="behaviorSettings" class="settings-form"  label-position="top">
                      <div class="tool-item">
                        <div class="tool-header">
                          <div class="header-left">
                            <span>
                              <el-icon>
                                <i class="fa-solid fa-person-running"></i>
                              </el-icon>
                              {{ t('AutoBehavior') }}
                            </span>
                          </div>
                          <el-switch v-model="behaviorSettings.enabled" @click.stop @change="resetCycleTimers();autoSaveSettings()" />
                        </div>
                        <div class="tool-content">
                          <el-form-item :label="t('enableAutoBehaviorTool')" class="form-item-align" label-position="left">
                            <el-switch 
                              v-model="toolsSettings.autoBehavior.enabled" 
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>
                          <el-alert type="info" :closable="false" class="mb-2">
                            <template #default>
                              <div class="alert-content">
                                {{ t('autoBehaviorToolNotice') }}
                              </div>
                            </template>
                          </el-alert>
                          <div v-show ="behaviorSettings.behaviorList.length > 0" style="display: flex; justify-content: flex-end;margin-bottom: 16px;">
                            <el-tooltip :content="t('addBehavior')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="addBehavior()"
                                circle
                              >
                                <i class="fa-solid fa-plus"></i>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('removeAllBehavior')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="removeAllBehavior()" 
                                circle
                              >
                                <i class="fa-solid fa-trash-can"></i>
                              </el-button>
                            </el-tooltip>
                          </div>
                          <!-- 行为块列表 -->
                          <div v-for="(b, idx) in behaviorSettings.behaviorList" :key="idx" class="behavior-block">
                            <!-- 行为块标题 + 开关 + 删除 -->
                            <div class="tool-header">
                              <div class="header-left">
                                <span>{{t(behaviorNameDict[b.trigger.type])}}</span>
                              </div>
                              <el-switch v-model="b.enabled" @change="resetCycleTimers();autoSaveSettings()" />
                            </div>

                            <!-- 触发条件 -->
                            <el-form-item :label="t('triggerType')">
                              <el-select v-model="b.trigger.type" @change="resetCycleTimers();autoSaveSettings()">
                                <el-option :label="t('timeName')"   value="time"></el-option>
                                <el-option :label="t('noInputName')" value="noInput"></el-option>
                                <el-option :label="t('cycleName')" value="cycle"></el-option>
                              </el-select>
                            </el-form-item>

                            <!-- 时间触发 -->
                            <div v-if="b.trigger.type === 'time'">
                              <el-row :gutter="12">
                                <el-col :span="24">
                                  <el-form-item :label="t('time')">
                                    <el-time-picker
                                      v-model="b.trigger.time.timeValue"
                                      value-format="HH:mm:ss"
                                      format="HH:mm:ss"
                                      :placeholder="t('selectTime')"
                                      @change="autoSaveSettings"
                                      style="width: 100%"
                                    />
                                  </el-form-item>
                                </el-col>
                              </el-row>
                              <el-form-item :label="t('repeatDays')">
                                <el-select v-model="b.trigger.time.days" multiple @change="autoSaveSettings">
                                  <el-option :label="t('monday')"    :value="1"></el-option>
                                  <el-option :label="t('tuesday')"   :value="2"></el-option>
                                  <el-option :label="t('wednesday')" :value="3"></el-option>
                                  <el-option :label="t('thursday')"  :value="4"></el-option>
                                  <el-option :label="t('friday')"    :value="5"></el-option>
                                  <el-option :label="t('saturday')"  :value="6"></el-option>
                                  <el-option :label="t('sunday')"    :value="0"></el-option>
                                </el-select>
                              </el-form-item>
                            </div>

                            <!-- 无输入触发 -->
                            <div v-if="b.trigger.type === 'noInput'">
                              <el-form-item :label="t('noInputLatency')">
                                <el-slider
                                  v-model="b.trigger.noInput.latency"
                                  :min="10"
                                  :max="600"
                                  :step="5"
                                  show-input
                                  @change="autoSaveSettings">
                                </el-slider>
                              </el-form-item>
                            </div>

                            <!-- 周期触发 - 新增部分 -->
                            <div v-if="b.trigger.type === 'cycle'">
                              <el-row :gutter="12">
                                <el-col :span="24">
                                  <el-form-item :label="t('cycleValue')">
                                    <el-time-picker
                                      v-model="b.trigger.cycle.cycleValue"
                                      value-format="HH:mm:ss"
                                      format="HH:mm:ss"
                                      :placeholder="t('selectTime')"
                                      @change="resetCycleTimers();autoSaveSettings()"
                                      style="width: 100%"
                                    />
                                  </el-form-item>
                                </el-col>
                              </el-row>
                              <el-form-item :label="t('repeatNumber')">
                                <el-slider
                                  v-model="b.trigger.cycle.repeatNumber"
                                  :min="1"
                                  :max="100"
                                  :step="1"
                                  show-input
                                  @change="resetCycleTimers();autoSaveSettings()">
                                </el-slider>
                              </el-form-item>
                              <el-form-item :label="t('isInfiniteLoop')" class="form-item-align" label-position="left">
                                <el-switch v-model="b.trigger.cycle.isInfiniteLoop" @change="resetCycleTimers();autoSaveSettings()"></el-switch>
                              </el-form-item>
                            </div>

                            <el-divider></el-divider>
                            <!-- 执行内容 -->
                            <el-form-item :label="t('actionType')">
                              <el-select v-model="b.action.type" @change="autoSaveSettings">
                                <el-option :label="t('prompt')" value="prompt"></el-option>
                                <el-option :label="t('randomEvent')" value="random"></el-option>
                              </el-select>
                            </el-form-item>

                            <el-form-item v-if="b.action.type === 'prompt'" :label="t('promptAction')">
                              <el-input
                                type="textarea"
                                v-model="b.action.prompt"
                                :rows="3"
                                :placeholder="t('promptPlaceholder')"
                                @input="autoSaveSettings"
                                class="full-width-input"/>
                            </el-form-item>

                            <el-form-item v-if="b.action.type === 'random'" :label="t('eventType')">
                              <el-select v-model="b.action.random.type" @change="autoSaveSettings">
                                <el-option :label="t('random')" value="random"></el-option>
                                <el-option :label="t('order')" value="order"></el-option>
                              </el-select>
                            </el-form-item>
                            <div v-for="(event, eventIdx) in b.action.random.events" :key="eventIdx">
                              <div class="event-button-group" v-if="b.action.type === 'random'">
                                <el-button @click="addNewEvent(idx)" type="primary" circle size="small">
                                  <el-icon><i class="fa-solid fa-plus"></i></el-icon>
                                </el-button>
                                <el-button v-show="eventIdx>0" @click="removeEvent(idx,eventIdx)" type="danger" circle size="small">
                                  <el-icon><i class="fa-solid fa-trash"></i></el-icon>
                                </el-button>
                              </div>
                              <el-form-item v-if="b.action.type === 'random'">
                                <el-input
                                  type="textarea"
                                  v-model="b.action.random.events[eventIdx]"
                                  :rows="3"
                                  :placeholder="t('promptPlaceholder')"
                                  @input="autoSaveSettings"
                                  class="full-width-input"/>
                              </el-form-item>
                            </div>
                            <div style="display: flex; justify-content: flex-end;margin-bottom: 16px;">
                              <el-tooltip :content="t('resetBehavior')" placement="top">
                                <el-button 
                                  type="default" 
                                  @click="resetBehavior(idx)" 
                                  circle
                                >
                                  <i class="fa-solid fa-rotate-right"></i>
                                </el-button>
                              </el-tooltip>
                              
                              <el-tooltip :content="t('removeBehavior')" placement="top">
                                <el-button 
                                  type="danger" 
                                  @click="removeBehavior(idx)" 
                                  circle
                                >
                                  <i class="fa-solid fa-trash"></i>
                                </el-button>
                              </el-tooltip>
                            </div>
                          </div>
                          <div style="display: flex; justify-content: flex-end;margin-bottom: 16px;">
                            <el-tooltip :content="t('addBehavior')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="addBehavior()"
                                circle
                              >
                                <i class="fa-solid fa-plus"></i>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('removeAllBehavior')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="removeAllBehavior()" 
                                circle
                              >
                                <i class="fa-solid fa-trash-can"></i>
                              </el-button>
                            </el-tooltip>
                          </div>

                        </div>
                      </div>
                    </el-form>
                  </el-tab-pane>
                  <!-- 添加新记忆标签页 -->
                  <el-tab-pane :label="t('addNewBehaviorChain')" name="add">
                    <div class="provider-grid">
                      
                      <!-- 添加新记忆磁贴 -->
                      <div class="provider-card add-tile">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addNewBehaviorChain') }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>

        <!-- 音频上传对话框 -->
        <el-dialog
          v-model="showGsvRefAudioPathDialog"
          :title="t('uploadGsvRefAudio')"
          width="600px"
        >
          <div class="upload-container">
            <div
              class="drop-zone"
              @dragover.prevent
              @drop.prevent="handleGsvRefAudioDrop"
              @click="browseGsvRefAudioFile"
            >
              <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
              <p>{{ t('clickOrDrop') }}</p>
            </div>
            
            <!-- 文件列表 -->
            <div class="compact-file-list" v-if="newGsvAudio.file">
              <div class="compact-file-item">
                <span class="file-name">@{{ newGsvAudio.name }}</span>
                <el-button
                  @click.stop="removeNewGsvAudio"
                  class="delete-icon"
                  circle
                >
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
            </div>
          </div>
          <el-form-item :label="t('gsvGsvAudioPath')" class="form-item-align" v-if="!newGsvAudio.file">
            <el-input
              v-model="newGsvAudio.path"
              :placeholder="t('gsvGsvAudioPathPlaceholder')"
              @input="changeGsvAudioPath"
            ></el-input>
          </el-form-item>
          <el-form-item :label="t('gsvPromptText')" class="form-item-align">
            <el-input
              v-model="newGsvAudio.text"
              :placeholder="t('gsvPromptTextPlaceholder')"
            ></el-input>
          </el-form-item>
          <template #footer>
            <el-button @click="cancelGsvAudioUpload">{{ t('cancel') }}</el-button>
            <el-button type="primary" @click="uploadGsvAudio" :disabled="!newGsvAudio.name">
              {{ t('createImmediately') }}
            </el-button>
          </template>
        </el-dialog>

        <div v-show="activeMenu === 'model-config'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧二级导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in modelTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容区 -->
            <div class="suite-content">
              <!-- 模型服务界面 -->
              <div v-show="subMenu === 'service'" class="page">
               <!-- 顶部说明条 -->
                <div class="toolbar">
                    <el-alert
                      :title="t('modelConfigDescription')"
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      1. {{ t('localConfigNotice') }}<br>
                      2. {{ t('localConfigNotice02') }}<br>
                      3. {{ t('localConfigNotice03') }}<br>
                    </el-alert>
                </div>
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有供应商磁贴 -->
                  <div class="provider-card" v-for="(provider, index) in modelProviders" :key="provider.id">
                    <div class="card-header">
                      <img 
                        :src="getVendorLogo(provider.vendor)" 
                        class="mini-vendor-logo"
                      />
                      <div class="card-actions">
                        <el-tooltip :content="t('copyProvider')" placement="top">
                          <el-button
                            @click="copyProvider(provider,index)"
                            type="default"
                            circle
                            size="small"
                          >
                          <i class="fa-solid fa-copy"></i>
                          </el-button>
                        </el-tooltip>
                        <el-tooltip :content="t('getAPIkey')" placement="top">
                          <el-button
                            @click="goToURL(provider)"
                            type="info"
                            circle
                            size="small"
                            id="get-API-key"
                          >
                          <i class="fa-solid fa-key"></i>
                          </el-button>
                        </el-tooltip>
                        <el-tooltip :content="t('getModelsList')" placement="top">
                          <el-button
                            @click="fetchModelsForProvider(provider)"
                            type="primary"
                            circle
                            size="small"
                            id="get-Models-List"
                          >
                          <i class="fa-solid fa-magnifying-glass"></i>
                          </el-button>
                        </el-tooltip>
                        <el-tooltip :content="t('delete')" placement="top">
                          <el-button
                            @click="removeProvider(index)"
                            type="danger"
                            circle
                            size="small"
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </el-tooltip>
                      </div>
                    </div>

                    <div class="input-group">
                      <!-- 添加输入框标签 -->
                      <div class="input-item">
                        <label>
                          {{ t('apiAddress') }}
                          <el-tooltip :content="t('copy')" placement="top">
                            <el-button
                              @click="copyApiKey(provider.url)"
                              type="default"
                              circle
                              size="small"
                              style="margin-bottom: 2px;"
                            >
                              <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </el-tooltip>
                        </label>
                        <el-input
                          v-model="provider.url"
                          :placeholder="t('apiAddressPlaceholder')"
                          @change="autoSaveSettings"
                        />
                      </div>

                      <div class="input-item">
                        <label>
                          {{ t('apiKey') }}
                          <el-tooltip :content="t('copy')" placement="top">
                            <el-button
                              @click="copyApiKey(provider.apiKey)"
                              type="default"
                              circle
                              size="small"
                              style="margin-bottom: 2px;"
                            >
                              <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </el-tooltip>
                        </label>

                        <el-input
                          v-model="provider.apiKey"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @change="autoSaveSettings"
                          id="input-api-Key"
                        />
                      </div>

                      <div class="input-item" id="model-Id">
                        <label>
                          {{ t('modelId') }}
                          <el-tooltip :content="t('copy')" placement="top">
                            <el-button
                              @click="copyApiKey(provider.modelId)"
                              type="default"
                              circle
                              size="small"
                              style="margin-bottom: 2px;"
                            >
                              <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </el-tooltip>
                        </label>
                        <el-select
                          v-model="provider.modelId"
                          filterable
                          allow-create
                          :placeholder="provider.models?.length ? t('selectOrTypeModel') : t('modelIdPlaceholder')"
                          class="model-select"
                          @change="autoSaveSettings"
                        >
                          <el-option
                            v-for="model in provider.models"
                            :key="model"
                            :label="model"
                            :value="model"
                          />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <!-- 添加新磁贴 -->
                  <div id="add-provider-card" class="provider-card add-tile" @click="showAddDialog = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewProvider') }}</div>
                  </div>
                </div>

                <!-- 添加供应商对话框 -->
                <el-dialog
                  v-model="showAddDialog"
                  id="show-Add-Dialog"
                  :title="t('addNewProvider')"
                  width="90%"
                  @closed="newProviderTemp = { vendor: '', url: '' }"
                >
                  <!-- 供应商选择区域 -->
                  <el-form-item :label="t('provider')" required label-position="top">
                    <div class="vendor-grid">
                      <div 
                        v-for="item in vendorOptions" 
                        :key="item.value"
                        class="vendor-card"
                        :class="{ 'selected': newProviderTemp.vendor === item.value }"
                        @click="handleSelectVendor(item.value)"
                        id="vendor-Option"
                      >
                        <img 
                          :src="getVendorLogo(item.value)" 
                          :alt="item.label"
                          class="vendor-logo"
                        />
                        <div class="vendor-name">{{ t(item.label) }}</div>
                      </div>
                    </div>
                  </el-form-item>


                    <el-form-item
                      v-if="newProviderTemp.vendor === 'custom'"
                      :label="t('customURL')"
                      required
                    >
                      <el-input
                        v-model="newProviderTemp.url"
                        placeholder="https://api.example.com/v1"
                      />
                    </el-form-item>

                    <div v-if="newProviderTemp.vendor && newProviderTemp.vendor !== 'custom'">
                      <el-alert
                        :title="t('defaultConfigInfo')"
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        1. {{ t('autoFilledDefaultAPI') }} {{ newProviderTemp.vendor }} URL<br>2. 
                          <el-link
                            type="primary"
                            :underline="false"
                            :href="vendorAPIpage[newProviderTemp.vendor]" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link><br>
                        3. {{ t('enterApiKeyThenClick') }}<br>
                        4. {{ t('localConfigNotice') }}
                      </el-alert>
                    </div>
                  </el-form>

                  <template #footer>
                    <el-button @click="showAddDialog = false">{{ t('cancel') }}</el-button>
                    <el-button
                      type="primary"
                      id = "confirm-Add-Provider-Button"
                      @click="confirmAddProvider"
                      :disabled="!validProvider"
                    >
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 主模型界面 -->
              <div v-show="subMenu === 'main'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <!-- 基础配置（仅供应商） -->
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microchip"></i>
                          </el-icon>
                          {{ t('basicConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('provider')" class="form-item-align">
                        <el-select
                          v-model="settings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectMainProvider"
                          @visible-change="handleMainProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('firstTimeUse') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              class="font-medium"
                              @click="switchToApiBox"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('keyBoxInterface') }}
                            </el-link>
                            {{ t('addProviderReturnSelect') }}
                            {{ t('mainmodelnotice') }}
                          </div>
                        </template>
                      </el-alert>
                  </div>
                  <!-- 新增高级配置 -->
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="settings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="'top_p'" class="form-item-align">
                        <el-slider
                          v-model="settings.top_p"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('outputLength')" class="form-item-align">
                        <el-slider
                          v-model="settings.max_tokens"
                          :min="0"
                          :max="128000"
                          :step="1024"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('conversationRounds')" class="form-item-align">
                        <el-slider
                          v-model="settings.max_rounds"
                          :min="0"
                          :max="1000"
                          :step="2"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('reasoningEffort')" class="form-item-align">
                        <el-select
                          v-model="settings.reasoning_effort"
                          :placeholder="t('reasoningEffort')"
                          @change="autoSaveSettings"
                          class="reasoning-effort-select"
                        >
                          <el-option
                            v-for="effort in reasoningEfforts"
                            :key="effort.value"
                            :label="t(effort.label)"
                            :value="effort.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('desktopVision')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="visionSettings.desktopVision" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('enableDesktopVisionWakeWord')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="visionSettings.enableWakeWord" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('desktopVisionWakeWord')" class="form-item-align">
                        <el-input
                          v-model="visionSettings.wakeWord"
                          :placeholder="t('desktopVisionWakeWordPlaceholder')"
                          @input="autoSaveSettings"
                          type="textarea"
                          :rows="3"
                        />
                      </el-form-item>
                      <div class="param-header">
                        <span>{{ t('extraParams') }}</span>
                        <el-button 
                          @click="addParam"
                          type="primary"
                          circle
                          size="small"
                          class="header-add-btn"
                        >
                          <i class="fa-solid fa-plus"></i>
                        </el-button>
                      </div>
                      <div class="extra-params">
                        <div
                          v-for="(param, index) in settings.extra_params"
                          :key="index"
                          class="param-row"
                        >
                          <el-input
                            v-model="param.name"
                            :placeholder="t('paramName')"
                            class="param-input"
                            @input="autoSaveSettings"
                          ></el-input>
                      
                          <el-select
                            v-model="param.type"
                            :placeholder="t('paramType')"
                            @change="updateParamType(index)"
                            class="type-select"
                          >
                            <el-option
                              v-for="type in paramTypes"
                              :key="type.value"
                              :label="t(type.label)"
                              :value="type.value"
                            ></el-option>
                          </el-select>
                      
                          <!-- 动态输入组件 -->
                          <div class="value-input">
                            <el-input
                              v-if="param.type === 'string'"
                              v-model="param.value"
                              :placeholder="t('paramValue')"
                              @input="autoSaveSettings"
                            ></el-input>
                          
                            <el-input-number
                              v-if="param.type === 'integer'"
                              v-model="param.value"
                              :step="1"         
                              :precision="0"   
                              @input="autoSaveSettings"
                            ></el-input-number>
                          
                            <el-input-number
                              v-if="param.type === 'float'"
                              v-model="param.value"
                              :step="0.5"      
                              :precision="2"    
                              @input="autoSaveSettings"
                            ></el-input-number>
      
                            <el-switch 
                              v-if="param.type === 'boolean'" 
                              v-model="param.value" 
                              @change="autoSaveSettings"
                            ></el-switch>
                          </div>
                      
                          <el-button
                            @click="removeParam(index)"
                            type="danger"
                            circle
                            size="small"
                            class="remove-btn"
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('extraParamsNotice') }}
                          </div>
                        </template>
                      </el-alert>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 推理模型界面 -->
              <div v-show="subMenu === 'reasoner'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-atom"></i>
                          </el-icon>
                          {{ t('reasonerConfig') }}
                        </span>
                      </div>
                      <el-switch v-model="reasonerSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('reasoningProvider')" class="form-item-align">
                        <el-select
                          v-model="reasonerSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectReasonerProvider"
                          @visible-change="handleReasonerProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('firstTimeUse') }}
                        <el-link
                          type="primary"
                          :underline="false"
                          class="font-medium"
                          @click="switchToApiBox"
                        >
                          <el-icon class="mr-1">
                            <i class="fa-solid fa-key"></i>
                          </el-icon>{{ t('keyBoxInterface') }}
                        </el-link>
                        {{ t('addProviderReturnSelect') }}
                        {{ t('addresonerNotice') }}
                      </div>
                    </template>
                  </el-alert>
                  </div>
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="reasonerSettings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('outputLength')" class="form-item-align">
                        <el-slider
                          v-model="reasonerSettings.max_tokens"
                          :min="0"
                          :max="128000"
                          :step="1024"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('stopWords')">
                        <el-select
                          v-model="reasonerSettings.stop_words"
                          multiple
                          filterable
                          allow-create
                          :placeholder="t('stopWordsPlaceholder')"
                          class="full-width-input"
                          @change="autoSaveSettings"
                        >
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('reasoningEffort')" class="form-item-align">
                        <el-select
                          v-model="reasonerSettings.reasoning_effort"
                          :placeholder="t('reasoningEffort')"
                          @change="autoSaveSettings"
                          class="reasoning-effort-select"
                        >
                          <el-option
                            v-for="effort in reasoningEfforts"
                            :key="effort.value"
                            :label="t(effort.label)"
                            :value="effort.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <div v-show="subMenu === 'vision'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon><i class="fa-solid fa-camera"></i></el-icon>
                          {{ t('visionSettings') }}
                        </span>
                      </div>
                      <el-switch v-model="visionSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('visionProvider')" class="form-item-align">
                        <el-select
                          v-model="visionSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectVisionProvider"
                          @visible-change="handleVisionProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('firstTimeUse') }}
                        <el-link
                          type="primary"
                          :underline="false"
                          class="font-medium"
                          @click="switchToApiBox"
                        >
                          <el-icon class="mr-1">
                            <i class="fa-solid fa-key"></i>
                          </el-icon>{{ t('keyBoxInterface') }}
                        </el-link>
                        {{ t('addProviderReturnSelect') }}
                        {{ t('addVisionNotice') }}
                      </div>
                    </template>
                  </el-alert>
                  </div>
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="visionSettings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('desktopVision')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="visionSettings.desktopVision" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('enableDesktopVisionWakeWord')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="visionSettings.enableWakeWord" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('desktopVisionWakeWord')" class="form-item-align">
                        <el-input
                          v-model="visionSettings.wakeWord"
                          :placeholder="t('desktopVisionWakeWordPlaceholder')"
                          @input="autoSaveSettings"
                          type="textarea"
                          :rows="3"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
             <!-- 图像生成界面 -->
              <div v-show="subMenu === 'text2img'" class="page">
                <el-form :model="text2imgSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          {{ t('imgModel') }}
                        </span>
                      </div>
                      <el-switch v-model="text2imgSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('imgEngine')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('pollinations')" value="pollinations" ></el-option>
                          <el-option :label="t('openaiImageLike')" value="openai" ></el-option>
                          <el-option :label="t('openaiChatLike')" value="openaiChat" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            1. {{ t('text2imgNotice') }}<br>
                            2. {{ t('gotoComfyui') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              class="font-medium"
                              @click="switchToComfyui"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('ComfyuiInterface') }}
                            </el-link>
                          </div>
                        </template>
                      </el-alert>
                    </div>
                  </div>
                  <div class="tool-item" v-show="text2imgSettings.engine === 'pollinations'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          Pollinations
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('model')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.pollinations_model"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Flux" value="flux" ></el-option>
                          <el-option label="Flux-turbo" value="turbo" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('width')" class="form-item-align">
                        <el-slider
                          v-model="text2imgSettings.pollinations_width"
                          :min="128"
                          :max="4096"
                          :step="64"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('height')" class="form-item-align">
                        <el-slider
                          v-model="text2imgSettings.pollinations_height"
                          :min="128"
                          :max="4096"
                          :step="64"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="text2imgSettings.engine === 'openai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          {{t('openaiImageLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('text2imgModelProvider')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectText2imgProvider"
                          @visible-change="handleText2imgProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('sizeAllowCreate')" class="form-item-align">
                        <el-select
                          filterable
                          allow-create
                          v-model="text2imgSettings.size"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="1024x1024" value="1024x1024" ></el-option>
                          <el-option label="1536x1024" value="1536x1024" ></el-option>
                          <el-option label="1024x1536" value="1024x1536" ></el-option>
                          <el-option label="256x256" value="256x256" ></el-option>
                          <el-option label="512x512" value="512x512" ></el-option>
                          <el-option label="1792x1024" value="1792x1024" ></el-option>
                          <el-option label="1024x1792" value="1024x1792" ></el-option>                          
                        </el-select>                        
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addText2imgNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                  <div class="tool-item" v-show="text2imgSettings.engine === 'openaiChat'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          {{t('openaiChatLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('imgModelProvider')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectText2imgProvider"
                          @visible-change="handleText2imgProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addimgNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                </el-form>
              </div>
             <!-- 语音识别界面 -->
              <div v-show="subMenu === 'asr'" class="page">
                <el-form :model="asrSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{ t('asrModel') }}
                        </span>
                      </div>
                      <el-switch v-model="asrSettings.enabled" @click.stop @change="handleASRchange"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('asrEngine')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.engine"
                          @change="autoSaveSettings();handleASRchange();"
                          class="full-width-input"
                        >
                          <el-option :label="t('sherpa-onnx-sense-voice')" value="sherpa" ></el-option>
                          <el-option :label="t('webSpeech')" value="webSpeech" ></el-option>
                          <el-option label="FunASR" value="funasr" ></el-option>
                          <el-option :label="t('openaiLike')" value="openai" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('interactionMethod')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.interactionMethod"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('auto')" value="auto" ></el-option>
                          <el-option :label="t('manual')" value="manual" ></el-option>
                          <el-option :label="t('wakeWord')" value="wakeWord" ></el-option>
                          <el-option :label="t('wakeWordAndEndWord')" value="wakeWordAndEndWord" ></el-option>
                          <el-option :label="t('keyTriggered')" value="keyTriggered" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('hotkey')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.hotkey"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Alt" value="Alt" ></el-option>
                          <el-option :label="t('Space')" value=" " ></el-option>
                          <el-option label="Ctrl" value="Control" ></el-option>
                          <el-option label="Shift" value="Shift" ></el-option>
                          <el-option label="CapsLock" value="CapsLock" ></el-option>
                          <el-option label="Tab" value="Tab" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('wakeWordMode')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.wakeWord"
                          :placeholder="t('wakeWordPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('endWordMode')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.endWord"
                          :placeholder="t('endWordPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <!-- Sherpa ONNX Sense Voice 卡片 -->
                  <el-card
                    v-show="asrSettings.engine === 'sherpa'"
                    shadow="hover"
                    class="sherpa-card"
                  >
                    <!-- 卡片头部：标题 + 安装状态 -->
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <!-- 左侧标题 -->
                      <span><strong>Sherpa ONNX Sense Voice</strong></span>

                      <!-- 右侧 tag 组 -->
                      <div class="d-flex gap-2">
                        <el-tag type="info" effect="dark">
                          239MB
                        </el-tag>

                        <el-tag
                          :type="sherpaModelExists ? 'success' : 'info'"
                          effect="dark"
                        >
                          {{ sherpaModelExists ? t('installed') : t('notInstalled') }}
                        </el-tag>
                      </div>
                    </div>


                    <!-- 操作按钮区 -->
                    <div class="card-actions">
                      <!-- 左侧：两个下载按钮 -->
                      <div class="left-actions">
                        <el-button
                          type="primary"
                          :disabled="sherpaModelExists || sherpaDownloading"
                          :loading="sherpaDownloading && source==='modelscope'"
                          @click="sherpaDownload('modelscope')"
                        >
                          {{ t('downloadFromModelScope') }}
                        </el-button>

                        <el-button
                          type="primary"
                          :style="{ margin: '0' }"
                          :disabled="sherpaModelExists || sherpaDownloading"
                          :loading="sherpaDownloading && source==='huggingface'"
                          @click="sherpaDownload('huggingface')"
                        >
                          {{ t('downloadFromHuggingFace') }}
                        </el-button>
                      </div>

                      <!-- 右侧：删除按钮 -->
                      <el-button
                        v-if="sherpaModelExists"
                        type="danger"
                        @click="sherpaRemove"
                      >
                        {{ t('deleteModel') }}
                      </el-button>
                    </div>


                    <!-- 进度条（固定在底部） -->
                    <el-progress
                      v-if="sherpaDownloading"
                      :percentage="sherpaPercent"
                      style="margin-top: 16px;"
                      :stroke-width="10"
                    ></el-progress>
                  </el-card>


                  <div class="tool-item" v-show="asrSettings.engine === 'webSpeech'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{t('webSpeechAPI')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('language')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.webSpeechLanguage"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option key="auto" :label="t('auto')" value="auto"></el-option>
                          <el-option
                            v-for="language in supportedLanguages"
                            :key="language.code"
                            :label="language.name"
                            :value="language.code"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('webSpeechNotice1') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                  <div class="tool-item" v-show="asrSettings.engine === 'openai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{t('openaiLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('asrModelProvider')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectAsrProvider"
                          @visible-change="handleAsrProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addAsrNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                  <div class="tool-item" v-show="asrSettings.engine === 'funasr'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          FunASR
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/modelscope/FunASR" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('funasrURL')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.funasr_ws_url"
                          :placeholder="t('funasrURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('mode')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.funasr_mode"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('online')" value="2pass" ></el-option>
                          <el-option :label="t('offline')" value="offline" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('hotwords')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.hotwords"
                          :placeholder="t('hotwordsPlaceholder')"
                          @input="autoSaveSettings"
                          type="textarea"
                          :rows="2"
                        />
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('funasrNotice1') }}<br>
                          {{ t('funasrNotice2') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                </el-form>
              </div>

              <!-- 语音合成界面 -->
              <div v-show="subMenu === 'tts'" class="page">
                <el-form :model="ttsSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          {{ t('ttsModel') }}
                        </span>
                      </div>
                      <el-switch v-model="ttsSettings.enabled" @click.stop @change="changeTTSstatus" />
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('ttsEngine')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('edgetts')" value="edgetts" ></el-option>
                          <el-option :label="t('systemtts')" value="systemtts" ></el-option>
                          <el-option label="GPT Sovits" value="GSV" ></el-option>
                          <el-option :label="t('openaiLike')" value="openai" ></el-option>
                          <el-option :label="t('customTTS')" value="customTTS" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('separators')">
                        <el-select
                          v-model="ttsSettings.separators"
                          multiple
                          filterable
                          allow-create
                          @keyup.enter.native="handleEnter"
                          @create="handleCreateSeparator"
                          @change="autoSaveSettings"
                        >
                          <el-option
                            v-for="sep in filteredSeparators"
                            :key="sep.value"
                            :label="sep.label"
                            :value="sep.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('enabledInterruption')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="ttsSettings.enabledInterruption" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                    <el-form-item :label="t('maxConcurrency')" class="form-item-align">
                      <el-slider
                        v-model="ttsSettings.maxConcurrency"
                        :min="1"
                        :max="16"
                        :step="1"
                        show-input
                        @change="autoSaveSettings">
                    </el-form-item>
                    <el-form-item :label="t('bufferWord')">
                      <el-select
                        v-model="ttsSettings.bufferWordList"
                        multiple
                        filterable
                        allow-create
                        :placeholder="t('bufferWordPlaceholder')"
                        class="full-width-input"
                        @change="autoSaveSettings"
                      >
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="t('SampleText')" class="server-item">
                      <el-input 
                        v-model="ttsSettings.SampleText" 
                        :placeholder="t('SampleTextPlaceholder')"
                        class="full-width-input"
                        style="margin-right: 10px;"
                        @change="autoSaveSettings"
                      >
                      </el-input>
                      <el-tooltip :content="t('ClickToListen')" placement="top">
                        <el-button 
                          type="primary" 
                          @click="ClickToListen(ttsSettings.SampleText)" 
                          circle
                        >
                          <i class="fa-solid fa-headphones"></i>
                        </el-button>
                      </el-tooltip>
                    </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="ttsSettings.engine === 'systemtts'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-laptop-code"></i>
                          </el-icon>
                          {{t('sysTTS')}}
                        </span>
                      </div>
                      <div class="header-right">
                         <el-button circle type="primary" @click="fetchSystemVoices" :loading="isLoadingSystemVoices">
                            <i class="fa-solid fa-rotate-right"></i>
                         </el-button>
                      </div>
                    </div>
                    
                    <div class="tool-content">
                      <el-form-item :label="t('TTSRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.systemRate"
                          :min="50"
                          :max="400"
                          :step="10"
                          show-input
                          @change="autoSaveSettings">
                        </el-slider>
                      </el-form-item>

                      <el-form-item :label="t('Timbre')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.systemVoiceName"
                          class="full-width-input"
                          :loading="isLoadingSystemVoices"
                          @change="autoSaveSettings"
                        >
                          <el-option
                            v-for="voice in systemVoices"
                            :key="voice.id"
                            :label="voice.name"
                            :value="voice.id"
                          >
                            <span style="float: left">{{ voice.name }}</span>
                            <span
                              style="
                                float: right;
                                color: var(--el-text-color-secondary);
                                font-size: 13px;
                              "
                            >
                              {{ voice.lang }}
                            </span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      
                      <div v-if="systemVoices.length === 0 && !isLoadingSystemVoices" style="color: #e6a23c; font-size: 12px; margin-top: 5px;">
                        <i class="fa-solid fa-triangle-exclamation"></i> {{t('noSystemVoiceDetected')}}
                      </div>
                    </div>
                  </div>

                  <div class="tool-item" v-show="ttsSettings.engine === 'openai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{t('openaiLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('TTSModelProvider')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectTTSProvider"
                          @visible-change="handleTTSProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('openaiStream')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="ttsSettings.openaiStream" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('TTSVoice')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.openaiVoice"
                          :placeholder="t('selectVoice')"
                          filterable
                          allow-create
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="voice in openaiVoices"
                            :key="voice"
                            :label="voice"
                            :value="voice"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <!-- 提示音频选择框 -->
                      <el-form-item :label="t('gsvPromptAudio')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvRefAudioPath"
                          @change="handleRefAudioPathChange"
                          class="full-width-input"
                        >
                          <el-option :key="null" :value="null" :label="t('noRefAudio')"></el-option>
                          <el-option
                            v-for="audio in ttsSettings.gsvAudioOptions"
                            :key="audio.path"
                            :label="audio.name"
                            :value="audio.path"
                          >
                            <div class="model-option-item">
                              <span>{{ audio.name }}</span>
                              <i 
                                class="fa-solid fa-trash-can"
                                style="color: #ff0000"
                                @click.stop="deleteAudioOption(audio.path)"
                              ></i>
                            </div>
                          </el-option>
                          
                        </el-select>
                      </el-form-item>
                      <!-- 语速滑动条 -->
                      <el-form-item :label="t('TTSRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.openaiSpeed"
                          :min="0.1"
                          :max="2"
                          :step="0.1"
                          show-input
                          @change="autoSaveSettings">
                      </el-form-item>
                    </div>
                    <el-button 
                      @click="showGsvRefAudioPathDialog = true;currentUploadType='audio'"
                      type="primary" 
                      class="add-server-btn">
                      <i class="fa-solid fa-plus"></i> {{ t('addRefAudio') }}
                    </el-button>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addTTSNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>

                  <div class="tool-item" v-show="ttsSettings.engine === 'customTTS'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          {{t('customTTS')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                        <el-form-item :label="t('customTTSserver')" class="form-item-align">
                          <el-input
                            v-model="ttsSettings.customTTSserver"
                            :placeholder="t('customTTSServerPlaceholder')"
                            @input="autoSaveSettings"
                            type="textarea"
                          />
                        </el-form-item>
                        <el-form-item :label="t('customStream')" class="form-item-align" label-position="left">
                          <el-switch 
                            v-model="ttsSettings.customStream" 
                            @change="autoSaveSettings"
                          ></el-switch>
                        </el-form-item>
                        
                        <el-form-item :label="t('customTTSspeaker')" class="form-item-align">
                            <el-input
                                v-model="ttsSettings.customTTSspeaker"
                                :placeholder="t('customTTSspeakerPlaceholder')"
                                @input="autoSaveSettings"
                                class="full-width-input"
                            />
                        </el-form-item>
                        <el-form-item :label="t('customTTSspeed')" class="form-item-align">
                            <el-slider
                                v-model="ttsSettings.customTTSspeed"
                                :min="0.1"
                                :max="2"
                                :step="0.1"
                                show-input
                                @change="autoSaveSettings">
                            </el-slider>
                        </el-form-item>

                        <hr> <div class="advanced-key-config">
                            <div class="tool-header" style="margin-bottom: 10px;">
                                <div class="header-left">
                                    <span>{{t('customTTSKeyMapping')}}</span>
                                </div>
                            </div>

                            <el-form-item :label="t('key_text')" class="form-item-align">
                                <el-input
                                    v-model="ttsSettings.customTTSKeyText"
                                    placeholder="text"
                                    @input="autoSaveSettings"
                                    class="full-width-input"
                                />
                            </el-form-item>

                            <el-form-item :label="t('key_speaker')" class="form-item-align">
                                <el-input
                                    v-model="ttsSettings.customTTSKeySpeaker"
                                    placeholder="speaker"
                                    @input="autoSaveSettings"
                                    class="full-width-input"
                                />
                            </el-form-item>

                            <el-form-item :label="t('key_speed')" class="form-item-align">
                                <el-input
                                    v-model="ttsSettings.customTTSKeySpeed"
                                    placeholder="speed"
                                    @input="autoSaveSettings"
                                    class="full-width-input"
                                />
                            </el-form-item>
                        </div>
                    </div>
                  </div>

                  <div class="tool-item" v-show="ttsSettings.engine === 'edgetts'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          Edge TTS
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <!-- 语速滑动条 -->
                      <el-form-item :label="t('edgettsRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.edgettsRate"
                          :min="0.1"
                          :max="2"
                          :step="0.1"
                          show-input
                          @change="autoSaveSettings">
                      </el-form-item>
                      <!-- 语言选择框 -->
                      <el-form-item :label="t('edgettsLanguage')" class="form-item-align">
                        <el-select
                          v-model="edgettsLanguage"
                          @change="updateLanguages"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in uniqueLanguages"
                            :key="language"
                            :label="language"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 性别选择框 -->
                      <el-form-item :label="t('edgettsGender')" class="form-item-align">
                        <el-select
                          v-model="edgettsGender"
                          @change="updateGenders"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="gender in uniqueGenders"
                            :key="gender"
                            :label="t(gender)"
                            :value="gender"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 语音选择框 -->
                      <el-form-item :label="t('edgettsVoice')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.edgettsVoice"
                          class="full-width-input"
                          @change="updateVoices"
                        >
                          <el-option
                            v-for="voice in filteredVoices"
                            :key="voice.name"
                            :label="voice.name"
                            :value="voice.name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="ttsSettings.engine === 'GSV'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          GPT Sovits
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/RVC-Boss/GPT-SoVITS" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('gsvServer')" class="form-item-align">
                        <el-input
                          v-model="ttsSettings.gsvServer"
                          :placeholder="t('gsvServerPlaceholder')"
                          @input="autoSaveSettings"
                          type="textarea"
                        />
                      </el-form-item>

                      <!-- 语速滑动条 -->
                      <el-form-item :label="t('gsvRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.gsvRate"
                          :min="0.1"
                          :max="2"
                          :step="0.1"
                          show-input
                          @change="autoSaveSettings">
                      </el-form-item>

                        <el-form-item :label="t('gsvSample_steps')" class="form-item-align">
                          <el-slider
                            v-model="ttsSettings.gsvSample_steps"
                            :min="1"
                            :max="16"
                            :step="1"
                            show-input
                            @change="autoSaveSettings">
                        </el-form-item>   

                      <!-- 语言选择框 -->
                      <el-form-item :label="t('gsvTextLang')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvTextLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in gsvTextLangs"
                            :key="language"
                            :label="t(language)"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 提示语言选择框 -->
                      <el-form-item :label="t('gsvPromptLang')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvPromptLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in gsvTextLangs"
                            :key="language"
                            :label="t(language)"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 提示音频选择框 -->
                      <el-form-item :label="t('gsvPromptAudio')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvRefAudioPath"
                          @change="handleRefAudioPathChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="audio in ttsSettings.gsvAudioOptions"
                            :key="audio.path"
                            :label="audio.name"
                            :value="audio.path"
                          >
                            <div class="model-option-item">
                              <span>{{ audio.name }}</span>
                              <i 
                                class="fa-solid fa-trash-can"
                                style="color: #ff0000"
                                @click.stop="deleteAudioOption(audio.path)"
                              ></i>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-button 
                        @click="showGsvRefAudioPathDialog = true;currentUploadType='audio'"
                        type="primary" 
                        class="add-server-btn">
                        <i class="fa-solid fa-plus"></i> {{ t('addRefAudio') }}
                      </el-button>

                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('gsvNotice1') }}<br>
                            {{ t('gsvNotice2') }}
                          </div>
                        </template>
                      </el-alert>
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <div v-show="activeMenu === 'toolkit'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in toolkitTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="suite-content">
              <!-- 工具界面 -->
              <div v-show="subMenu === 'tools'" class="page">
                <div class="provider-grid">
                  <!-- 异步工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.asyncTools.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('asyncTools') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('asyncToolsNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 当前时间工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.time.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('currentTime') }}</h3>
                    </div>
                    <el-form-item :label="t('triggerMode')">
                      <el-select
                        v-model="toolsSettings.time.triggerMode"
                        @change="autoSaveSettings"
                      >
                          <el-option :label="t('beforeThinking')" value="beforeThinking" ></el-option>
                          <el-option :label="t('afterThinking')" value="afterThinking" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('currentTimeNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 当前天气工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.weather.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('openMeteoWeather') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('weatherNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 维基百科工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.wikipedia.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('wikipedia') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('wikipediaNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- arxiv工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.arxiv.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('arxiv') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('arxivNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 工具结果备忘录 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.toolMemorandum.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('toolMemorandum') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('toolMemorandumNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 存储空间文件查询工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.getFile.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('fileGet') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('fileGetNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 深度研究工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.deepsearch.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('deepResearch') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('deepResearchNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- 推理工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.inference.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('fakeInference') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('fakeInferenceNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- LaTeX增强工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.formula.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div  class="tool-card-title">
                      <h3 class="kb-title">{{ t('latexRenderingEnhancement') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('latexRenderingEnhancementNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- 语言语调工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.language.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('languageTone') }}</h3>
                    </div>
                    <el-form-item :label="t('assistantLanguage')">
                      <el-input
                        v-model="toolsSettings.language.language"
                        @change="autoSaveSettings"
                        class="mini-input"
                        :placeholder="t('languagePlaceholder')"
                      ></el-input>
                    </el-form-item>
                    
                    <el-form-item :label="t('assistantTone')">
                      <el-input
                        v-model="toolsSettings.language.tone"
                        @change="autoSaveSettings"
                        class="mini-input"
                        :placeholder="t('tonePlaceholder')"
                      ></el-input>
                    </el-form-item>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('languageNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 自主行为工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.autoBehavior.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('autoBehaviorTool') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('autoBehaviorToolNotice') }}
                      </div>
                    </el-alert>
                  </div>
                </div>
              </div>

              <!-- HA界面 -->
              <div v-show="subMenu === 'HA'" class="page">
                <el-form :model="HASettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-house"></i>
                          </el-icon>
                          {{ t('homeAssistant') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://www.home-assistant.io/" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                      <el-switch v-model="HASettings.enabled" @click.stop @change="changeHAEnabled"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="HASettings.url"
                          :placeholder="t('urlPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="HASettings.api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-alert type="info" :closable="false" class="mb-2">
                        <div class="alert-content">
                          {{ t('HANotice1') }}<br>
                          {{ t('HANotice2') }}<br>
                          {{ t('HANotice3') }}<br>
                          {{ t('HANotice4') }}
                        </div>
                      </el-alert>
                    </div>
                  </div>
                </el-form> 
              </div>

              <!-- 浏览器控制界面 -->
              <div v-show="subMenu === 'chromeMCP'" class="page">
                <el-form :model="chromeMCPSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-brands fa-chrome"></i>
                          </el-icon>
                          {{ t('browserControl') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://browsermcp.io/install" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoBrowserExtension') }}
                          </el-link>
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://nodejs.org/en/download" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('downloadNodeJS') }}
                          </el-link>
                        </span>
                      </div>
                      <el-switch v-model="chromeMCPSettings.enabled" @click.stop @change="changeChromeMCPEnabled"/>
                    </div>
                    <div class="tool-content">
                      <el-alert type="info" :closable="false" class="mb-2">
                        <div class="alert-content">
                          {{ t('browserNotice1') }}<br>
                          {{ t('browserNotice2') }}<br>
                          {{ t('browserNotice3') }}
                        </div>
                      </el-alert>
                    </div>
                  </div>
                  <!-- Node.js 卡片：已安装 & 未安装 双状态 -->
                  <el-card shadow="hover" class="sherpa-card">
                    <!-- 头部：标题 + 状态标签 -->
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <span><strong>Node.js</strong></span>

                      <div class="d-flex gap-2">
                        <el-button
                          v-if="!nodeInstalled"
                          type="primary"
                          :loading="nodeInstalling"
                          @click="installNode"
                        >
                          <i class="fa-solid fa-download"></i>
                          {{ t('installNode') }}
                        </el-button>
                        <el-tag v-else type="success" effect="dark" size="large">  
                          <i class="fa-solid fa-circle-check"></i>
                          {{ t('installed') }}
                        </el-tag>
                      </div>
                    </div>

                    <!-- 进度条 -->
                    <el-progress
                      v-if="nodeInstalling && nodeProgress > 0"
                      :percentage="nodeProgress"
                      :status="nodeProgress === 100 ? 'success' : null"
                      style="margin-top: 16px;"
                      :stroke-width="10"
                    />
                  </el-card>
                </el-form> 
              </div>
              
              <!-- SQL控制界面 -->
              <div v-show="subMenu === 'sql'" class="page">
                <el-form :model="sqlSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-database"></i>
                          </el-icon>
                          {{ t('sqlControl') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://docs.astral.sh/uv/getting-started/installation/" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('downloadUV') }}
                          </el-link>
                        </span>
                      </div>
                      <el-switch v-model="sqlSettings.enabled" @click.stop @change="changeSqlEnabled"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('sqlEngine')" class="form-item-align">
                        <el-select
                          v-model="sqlSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="SQLite" value="sqlite" ></el-option>
                          <el-option label="PostgreSQL" value="postgres" ></el-option>
                          <el-option label="MySQL/MariaDB" value="mysql" ></el-option>
                          <el-option label="Microsoft SQL Server" value="mssql" ></el-option>
                          <el-option label="Oracle" value="oracle" ></el-option>
                        </el-select>
                      </el-form-item> 
                      <el-form-item v-if="sqlSettings.engine!='sqlite'" :label="t('user')" class="form-item-align">
                        <el-input
                          v-model="sqlSettings.user"
                          @input="autoSaveSettings"
                          placeholder="root"
                        />
                      </el-form-item>
                      <el-form-item v-if="sqlSettings.engine!='sqlite'" :label="t('password')" class="form-item-align">
                        <el-input
                          v-model="sqlSettings.password"
                          show-password
                          placeholder="password"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item v-if="sqlSettings.engine!='sqlite'" :label="t('host')" class="form-item-align" style="width: 100%">
                        <div style="display: flex; gap: 10px; width: 100%;">
                          <el-input
                            v-model="sqlSettings.host"
                            placeholder="localhost"
                            @input="autoSaveSettings"
                            style="flex: 1 1 0; min-width: 0;"
                          ></el-input>
                          <el-input-number
                            v-model="sqlSettings.port"
                            :step="1"
                            :min="0"
                            :max="65535"
                            @input="autoSaveSettings"
                            style="flex: 0 0 150px;"
                          ></el-input-number>
                        </div>
                      </el-form-item>
                      <el-form-item v-if="sqlSettings.engine!='sqlite'" :label="t('dbname')" class="form-item-align">
                        <el-input
                          v-model="sqlSettings.dbname"
                          placeholder="dbname"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item v-if="sqlSettings.engine =='sqlite'" :label="t('dbpath')" class="form-item-align">
                        <el-input
                          v-model="sqlSettings.dbpath"
                          placeholder="/absolute/path/to/database.db"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-alert type="info" :closable="false" class="mb-2">
                        <div class="alert-content">
                          {{ t('sqlNotice1') }}<br>
                          {{ t('sqlNotice2') }}
                        </div>
                      </el-alert>
                    </div>                   
                  </div>
                  <!-- uv 卡片：已安装 & 未安装 双状态 -->
                  <el-card shadow="hover" class="sherpa-card">
                    <!-- 头部：标题 + 状态标签 -->
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <span><strong>UV</strong></span>

                      <div class="d-flex gap-2">
                        <el-button
                          v-if="!uvInstalled"
                          type="primary"
                          :loading="uvInstalling"
                          @click="installUv"
                        >
                          <i class="fa-solid fa-download"></i>
                          {{ t('installUv') }}
                        </el-button>
                        <el-tag v-else type="success" effect="dark" size="large">
                          <i class="fa-solid fa-circle-check"></i>
                          {{ t('installed') }}
                        </el-tag>
                      </div>
                    </div>

                    <!-- 进度条 -->
                    <el-progress
                      v-if="uvInstalling && uvProgress > 0"
                      :percentage="uvProgress"
                      :status="uvProgress === 100 ? 'success' : null"
                      style="margin-top: 16px;"
                      :stroke-width="10"
                    />
                  </el-card>
                </el-form> 
              </div>

              <!-- 代码解释器界面 -->
              <div v-show="subMenu === 'interpreter'" class="page">
                <el-form :model="codeSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          {{ t('interpreter') }}
                        </span>
                      </div>
                      <el-switch v-model="codeSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('codeEngine')" class="form-item-align">
                        <el-select
                          v-model="codeSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="E2B" value="e2b" ></el-option>
                          <el-option label="Sandbox Fusion" value="sandbox" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="codeSettings.engine === 'e2b'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          E2B
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://e2b.dev/" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="codeSettings.e2b_api_key"
                          :placeholder="t('e2bAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="codeSettings.engine === 'sandbox'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          Sandbox Fusion
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/bytedance/SandboxFusion" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="codeSettings.sandbox_url"
                          :placeholder="t('sandboxURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form> 
              </div>
              <!-- 终端工具界面 -->
              <div v-show="subMenu === 'CLI'" class="page">
                <el-form v-if="isElectron" :model="CLISettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-terminal"></i>
                          </el-icon>
                          {{ t('CLItool') }}
                        </span>
                      </div>
                      <el-switch v-model="CLISettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('CLIEngine')" class="form-item-align">
                        <el-select
                          v-model="CLISettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Claude Code" value="cc" ></el-option>
                          <el-option label="Qwen Code" value="qc" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="CLISettings.engine === 'cc'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-terminal"></i>
                          </el-icon>
                          Claude Code
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/anthropics/claude-code" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item required :label="t('workspace')" class="form-item-align">
                        <el-input
                          v-model="CLISettings.cc_path"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button @click="browseDirectory">
                                <i class="fa-solid fa-folder"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item required :label="t('enabledCCconfig')" class="form-item-align" label-position="left">
                        <el-switch
                          v-model="ccSettings.enabled"
                          @change="autoSaveSettings"
                          class="tool-switch"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('anthropicSupportedProviders')" class="form-item-align">
                        <el-select
                          v-model="ccSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectCCProvider"
                          @visible-change="handleCCProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in filteredClaudeModelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('ClaudeCodeNotice1') }}
                        </div>
                      </template>
                    </el-alert>
                    <div class="browser-mode-btn-container" v-show="CLISettings.engine === 'cc'">
                      <el-button
                        class="browser-mode-btn"
                        type="primary"
                        @click="installClaudeCode"
                        round
                        size="large">
                          <i class="fa-solid fa-download"></i>
                          {{ t('installClaudeCode') }}
                      </el-button>
                    </div>
                  </div>
                  <div class="tool-item" v-show="CLISettings.engine === 'qc'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-terminal"></i>
                          </el-icon>
                          Qwen Code
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/QwenLM/qwen-code" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item required :label="t('workspace')" class="form-item-align">
                        <el-input
                          v-model="CLISettings.cc_path"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button @click="browseDirectory">
                                <i class="fa-solid fa-folder"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item required :label="t('enabledCCconfig')" class="form-item-align" label-position="left">
                        <el-switch
                          v-model="qcSettings.enabled"
                          @change="autoSaveSettings"
                          class="tool-switch"
                        ></el-switch>
                      </el-form-item>
                      <el-form-item :label="t('provider')" class="form-item-align">
                        <el-select
                          v-model="qcSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectQCProvider"
                          @visible-change="handleQCProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('QwenCodeNotice1') }}
                        </div>
                      </template>
                    </el-alert>
                    <div class="browser-mode-btn-container" v-show="CLISettings.engine === 'qc'">
                      <el-button
                        class="browser-mode-btn"
                        type="primary"
                        @click="installQwenCode"
                        round
                        size="large">
                          <i class="fa-solid fa-download"></i>
                          {{ t('installQwenCode') }}
                      </el-button>
                    </div>
                  </div>
                </el-form> 
                <!-- Web端提示 -->
                <div v-else >
                  <el-empty :description="t('webNotSupported')" />
                </div>
              </div>
              <!-- 联网搜索界面 -->
              <div v-show="subMenu === 'websearch'" class="page">
                <el-form :model="webSearchSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          {{ t('webSearch') }}
                        </span>
                      </div>
                      <el-switch v-model="webSearchSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('searchEngine')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="DuckDuckGo" value="duckduckgo" ></el-option>
                          <el-option label="SearXNG" value="searxng" ></el-option>
                          <el-option label="Tavily" value="tavily" ></el-option>
                          <el-option label="Bing" value="bing" ></el-option>
                          <el-option label="Google" value="google" ></el-option>
                          <el-option label="Brave" value="brave" ></el-option>
                          <el-option label="Exa" value="exa" ></el-option>
                          <el-option label="Serper" value="serper" ></el-option>
                          <el-option label="Bochaai" value="bochaai" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('webCrawling')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.crawler"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Jina" value="jina" ></el-option>
                          <el-option label="Crawl4AI" value="crawl4ai" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('webSearchTiming')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.when"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('beforeThinking')" value="before_thinking" ></el-option>
                          <el-option :label="t('afterThinking')" value="after_thinking" ></el-option>
                          <el-option :label="t('both')" value="both" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'duckduckgo'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          DuckDuckGo{{t("noNet")}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.duckduckgo_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'searxng'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          SearXNG
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/searxng/searxng" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.searxng_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.searxng_url"
                          :placeholder="t('searxngURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'tavily'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Tavily
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://app.tavily.com/home" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.tavily_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.tavily_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <!-- Bing 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'bing'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Bing
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://learn.microsoft.com/en-us/bing/search-apis/bing-web-search/create-bing-search-service-resource"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.bing_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bing_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('searchEndpoint')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bing_search_url"
                          placeholder="https://api.bing.microsoft.com/v7.0/search"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Google 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'google'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Google
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://console.cloud.google.com/apis/credentials"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.google_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.google_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item label="CSE ID" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.google_cse_id"
                          :placeholder="t('googleCSEIdPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Brave 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'brave'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Brave
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://brave.com/search/api/"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.brave_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.brave_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Exa 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'exa'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Exa
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://docs.exa.ai/reference/welcome"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.exa_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.exa_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Serper 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'serper'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Serper
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://serper.dev/dashboard"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.serper_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.serper_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <!-- Bochaai 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'bochaai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Bochaai
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://open.bochaai.com/overview"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.bochaai_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          show-input
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bochaai_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.crawler === 'jina'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          jina
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://jina.ai/api-dashboard" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.jina_api_key"
                          :placeholder="t('jinaAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.crawler === 'crawl4ai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Crawl4Ai
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/unclecode/crawl4ai" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.Crawl4Ai_url"
                          :placeholder="t('crawl4AiURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.Crawl4Ai_api_key"
                          :placeholder="t('crawl4AiAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 知识库界面 -->
              <div v-show="subMenu === 'document'" class="page">
                <el-tabs v-model="activeKbTab">
                  <el-tab-pane :label="t('kbSettings')" name="settings">
                    <el-form :model="KBSettings" class="settings-form"  label-position="top">
                      <div class="tool-item">
                        <div class="tool-header">
                          <div class="header-left">
                            <span>
                              <el-icon>
                                <i class="fa-solid fa-book"></i>
                              </el-icon>
                              {{ t('knowledgeBase') }}
                            </span>
                          </div>
                        </div>
                        <div class="tool-content">
                          <!-- 原有搜索时机设置 -->
                          <el-form-item :label="t('KBSearchTiming')" class="form-item-align">
                            <el-select
                              v-model="KBSettings.when"
                              @change="autoSaveSettings"
                              class="full-width-input"
                            >
                              <el-option :label="t('beforeThinking')" value="before_thinking"></el-option>
                              <el-option :label="t('afterThinking')" value="after_thinking"></el-option>
                              <el-option :label="t('both')" value="both"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item :label="t('returnChunks')" class="form-item-align">
                            <el-slider
                              v-model="KBSettings.top_n"
                              :min="1"
                              :max="20"
                              :step="1"
                              show-input
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <!-- 新增参数设置 -->
                          <el-form-item :label="t('rerankEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="KBSettings.is_rerank"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>
                          <!-- 模型参数 -->
                          <el-form-item :label="t('rerankProvider')" class="form-item-align" v-show="KBSettings.is_rerank">
                            <el-select
                              v-model="KBSettings.selectedProvider"
                              :placeholder="t('selectProvider')"
                              filterable
                              @change="selectRankProvider"
                              @visible-change="handleRankProviderVisibleChange"
                              class="full-width-input"
                            >
                              <el-option
                                v-for="provider in modelProviders"
                                :key="provider.id"
                                :label="provider.vendor+' - '+provider.modelId"
                                :value="provider.id"
                              >
                                <div class="provider-option">
                                  <img 
                                    :src="getVendorLogo(provider.vendor)" 
                                    class="mini-vendor-logo"
                                  />
                                  <span class="model-id">{{ provider.modelId }}</span>
                                </div>
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-alert
                            type="info"
                            :closable="false"
                            class="mb-2"
                          >
                            <template #default>
                              <div class="alert-content" v-show="KBSettings.is_rerank">
                                {{ t('firstTimeUse') }}
                                <el-link
                                  type="primary"
                                  :underline="false"
                                  class="font-medium"
                                  @click="switchToApiBox"
                                >
                                  <el-icon class="mr-1">
                                    <i class="fa-solid fa-key"></i>
                                  </el-icon>{{ t('keyBoxInterface') }}
                                </el-link>
                                {{ t('addProviderReturnSelect') }}
                                {{ t('rerankmodelnotice') }}
                              </div>
                            </template>
                          </el-alert>
                        </div>
                      </div>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('minilmNotice') }}
                          </div>
                        </template>
                      </el-alert>
                      <!-- Minilm ONNX 卡片 -->
                      <el-card
                        shadow="hover"
                        class="sherpa-card"
                      >
                        <!-- 卡片头部：标题 + 安装状态 -->
                        <div class="card-header d-flex justify-content-between align-items-center">
                          <!-- 左侧标题 -->
                          <span><strong>Paraphrase Multilingual MiniLM L12 v2</strong></span>

                          <!-- 右侧 tag 组 -->
                          <div class="d-flex gap-2">
                            <el-tag type="info" effect="dark">
                              224MB
                            </el-tag>

                            <el-tag
                              :type="minilmModelExists ? 'success' : 'info'"
                              effect="dark"
                            >
                              {{ minilmModelExists ? t('installed') : t('notInstalled') }}
                            </el-tag>
                          </div>
                        </div>


                        <!-- 操作按钮区 -->
                        <div class="card-actions">
                          <!-- 左侧：两个下载按钮 -->
                          <div class="left-actions">
                            <el-button
                              type="primary"
                              :disabled="minilmModelExists || minilmDownloading"
                              :loading="minilmDownloading && source==='modelscope'"
                              @click="minilmDownload('modelscope')"
                            >
                              {{ t('downloadFromModelScope') }}
                            </el-button>

                            <el-button
                              type="primary"
                              :style="{ margin: '0' }"
                              :disabled="minilmModelExists || minilmDownloading"
                              :loading="minilmDownloading && source==='huggingface'"
                              @click="minilmDownload('huggingface')"
                            >
                              {{ t('downloadFromHuggingFace') }}
                            </el-button>
                          </div>

                          <!-- 右侧：删除按钮 -->
                          <el-button
                            v-if="minilmModelExists"
                            type="danger"
                            @click="minilmRemove"
                          >
                            {{ t('deleteModel') }}
                          </el-button>
                        </div>


                        <!-- 进度条（固定在底部） -->
                        <el-progress
                          v-if="minilmDownloading"
                          :percentage="minilmPercent"
                          style="margin-top: 16px;"
                          :stroke-width="10"
                        ></el-progress>
                      </el-card>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane :label="t('addKnowledgeBase')" name="add">
                    <!-- 磁贴网格 -->
                    <div class="provider-grid">
                      <!-- 知识库磁贴 -->
                      <div class="provider-card knowledge-card" v-for="kb in knowledgeBases" :key="kb.id">
                        <div class="card-header">
                          <!-- 加载状态指示 -->
                          <el-switch 
                            v-show="kb.processingStatus !== 'processing'" 
                            v-model="kb.enabled" 
                            @change="toggleKbEnabled(kb)">
                          </el-switch>

                          <div class="card-actions">
                            <el-button  type="info" v-if="kb.processingStatus === 'processing'"  circle size="small">
                              <i class="fa-solid fa-spinner"></i>
                            </el-button>
                            <el-button @click="removeKnowledgeBase(kb)" type="danger"  circle size="small">
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>

                        <!-- 内容区域根据状态显示 -->
                        <!-- 修改模板部分 -->
                        <template v-if="kb.processingStatus !== 'processing'">
                          <div class="kb-content">
                            <div class="kb-header">
                              <h3 class="kb-title">{{ kb.name }}</h3>
                              <el-tag v-if="kb.files?.length" type="info" size="small">
                                {{ kb.files.length }} {{ t('files') }}
                              </el-tag>
                            </div>
                            <p class="kb-description">{{ kb.introduction || t('noDescription') }}</p>
                            <div class="kb-meta">
                              <div class="kb-meta-item">
                                <el-icon class="kb-icon">
                                  <i class="fa-solid fa-file"></i>
                                </el-icon>
                                <span>{{ t('model') }}: {{ kb.model || t('default') }}</span>
                              </div>
                              <div class="kb-meta-item">
                                <el-icon class="kb-icon">
                                  <i class="fa-solid fa-database"></i>
                                </el-icon>
                                <span>{{ t('segment') }}: {{ kb.chunk_size }} / {{ kb.chunk_overlap }}</span>
                              </div>
                            </div>
                          </div>
                        </template>
                        <div v-else class="processing-message">
                          <p>{{ t('knowledgeBaseGenerating') }}</p>
                        </div>
                      </div>
                      <!-- 添加新知识库磁贴 -->
                      <div class="provider-card add-tile" @click="showAddKbDialog = true;currentUploadType = 'file'">
                        <el-icon :size="40" color="#909399">
                          <i class="fa-solid fa-plus"></i>
                        </el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addNewKnowledgeBase') }}</div>
                      </div>
                    </div>

                    <!-- 添加知识库对话框 -->
                    <el-dialog
                      v-model="showAddKbDialog"
                      :title="t('addNewKnowledgeBase')"
                      width="80%"
                      @closed="() => {
                        newKb = {
                          name: '',
                          introduction: '',
                          providerId: null,
                          model: '',
                          base_url: '',
                          api_key: '',
                          chunk_size: 1024,
                          chunk_overlap: 256,
                          weight: 0.5,
                          chunk_k: 5
                        }
                      }"
                    >
                      <el-form label-position="top" label-width="120px">
                        <el-form-item :label="t('knowledgeBaseName')" required>
                          <el-input v-model="newKb.name" :placeholder="t('enterKnowledgeBaseName')" />
                        </el-form-item>

                        <el-form-item :label="t('knowledgeBaseIntro')">
                          <el-input v-model="newKb.introduction" type="textarea" :placeholder="t('enterKnowledgeBaseIntro')" />
                        </el-form-item>

                        <el-form-item :label="t('embeddingProvider')" required>
                          <el-select
                            v-model="newKb.providerId"
                            :placeholder="t('selectProvider')"
                            filterable
                            @change="selectKbProvider"
                            class="full-width-input"
                          >
                            <el-option
                              key='paraphrase-multilingual-MiniLM-L12-v2'
                              :label="t('localVendor') + ' - ' + 'paraphrase-multilingual-MiniLM-L12-v2'"
                              value='paraphrase-multilingual-MiniLM-L12-v2'
                            >
                              <div class="provider-option">
                                <img 
                                  :src="getVendorLogo('Local')" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">paraphrase-multilingual-MiniLM-L12-v2</span>
                              </div>
                            </el-option>
                            <el-option
                              v-for="provider in modelProviders"
                              :key="provider.id"
                              :label="provider.vendor+' - '+provider.modelId"
                              :value="provider.id"
                            >
                              <div class="provider-option">
                                <img 
                                  :src="getVendorLogo(provider.vendor)" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">{{ provider.modelId }}</span>
                              </div>
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-alert type="info" :closable="false" class="mb-2">
                          <template #default>
                            <div class="alert-content">
                              {{ t('minilmNotice2') }}
                              <el-link
                                type="primary"
                                :underline="false"
                                class="font-medium"
                                @click="switchToKnowledgeConfig"
                              >
                                <el-icon class="mr-1">
                                  <i class="fa-solid fa-key"></i>
                                </el-icon>{{ t('goToKnowledgeBase') }}
                              </el-link><br>
                              {{ t('firstTimeUse') }}
                              <el-link
                                type="primary"
                                :underline="false"
                                class="font-medium"
                                @click="switchToApiBox"
                              >
                                <el-icon class="mr-1">
                                  <i class="fa-solid fa-key"></i>
                                </el-icon>{{ t('keyBoxInterface') }}
                              </el-link>
                              {{ t('addProviderReturnSelect') }}
                              {{ t('addemdNotice') }}
                            </div>
                          </template>
                        </el-alert>
                        <el-collapse v-model="activeCollapse" class="advanced-settings">
                          <el-collapse-item name="advanced">
                            <template #title>
                              <div class="collapse-title">
                                <span class="font-medium">{{ t('advancedSettingsClickExpand') }}</span>
                              </div>
                            </template>

                            <el-form-item :label="t('segmentSize')">
                              <el-slider
                                v-model="newKb.chunk_size"
                                :min="512"
                                :max="4096"
                                :step="512"
                                show-input
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('overlapSize')">
                              <el-slider
                                v-model="newKb.chunk_overlap"
                                :min="128"
                                :max="1024"
                                :step="128"
                                show-input
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('returnParagraphs')">
                              <el-slider
                                v-model="newKb.chunk_k"
                                :min="1"
                                :max="50"
                                :step="1"
                                show-input
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('keywordSemanticWeight')">
                              <span style="margin-right: 10px;">{{t('keyword')}}</span>
                              <el-slider
                                v-model="newKb.weight"
                                :min="0"
                                :max="1"
                                :step="0.1"
                                show-input
                                @input="autoSaveSettings"
                                style="flex: 1;"
                              ></el-slider>
                              <span style="margin-left: 10px;">{{t('semantic')}}</span>
                            </el-form-item>
                          </el-collapse-item>
                        </el-collapse>
                      </el-form>
                      <!-- 文件上传区域 -->
                      <el-form-item>
                        <el-button 
                          type="primary"
                          @click="browseKbFiles"
                          class="add-server-btn"
                        >
                          <i class="fa-solid fa-upload"></i>
                          {{t('uploadFile')}}
                        </el-button>
                        <!-- 紧凑型文件列表 -->
                        <div class="compact-file-list" v-if="newKbFiles.length">
                          <div
                            v-for="(file, index) in newKbFiles"
                            :key="index"
                            class="compact-file-item"
                          >
                            <span class="file-name">@{{ file.name }}</span>
                            <el-button
                              @click.stop="removeKbFile(index)"
                              class="delete-icon"
                              circle
                            >
                            <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                      </el-form-item>
                      <template #footer>
                        <el-button @click="showAddKbDialog = false">{{ t('cancel') }}</el-button>
                        <el-button
                          type="primary"
                          @click="createKnowledgeBase"
                          :disabled="!newKb.name || !newKb.providerId"
                        >
                          {{ t('createImmediately') }}
                        </el-button>
                      </template>
                    </el-dialog>
                  </el-tab-pane>
                </el-tabs>
              </div>

            <!-- 新增表情包界面 -->
              <div v-show="subMenu === 'sticker'" class="page">
                <div class="provider-grid">
                  <!-- 已有表情包库 -->
                  <div 
                    v-for="pack in stickerPacks" 
                    :key="pack.id"
                    class="provider-card knowledge-card">
                    <div class="card-header">
                      <el-switch v-model="pack.enabled"></el-switch>
                      <div class="card-actions">
                        <el-button @click="deleteStickerPack(pack)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <div class="kb-header">
                        <h3 class="kb-title">{{ pack.name }}</h3>
                        <el-tag v-if="pack.stickers?.length" type="info" size="small" effect="dark">
                          {{ pack.stickers.length }} {{ t('images') }}
                        </el-tag>
                      </div>
                      <div class="kb-meta">
                        <img :src="pack.cover" class="cover-image" />
                      </div>
                    </div>
                  </div>

                  <!-- 添加新表情包库 -->
                  <div class="provider-card add-tile" @click="showStickerDialog = true">
                    <el-icon :size="40" color="#909399">
                      <i class="fa-solid fa-plus"></i>
                    </el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addStickerPack') }}</div>
                  </div>
                </div>

                <!-- 表情包创建对话框 -->
                <el-dialog
                  v-model="showStickerDialog"
                  :title="t('createStickerPack')"
                  width="60%">
                  <el-form label-position="top">
                    <el-form-item :label="t('packName')" required>
                      <el-input v-model="newStickerPack.name" />
                    </el-form-item>

                    <el-form-item :label="t('uploadStickers')" required>
                      <div class="sticker-upload">
                        <el-upload
                          multiple
                          list-type="picture-card"
                          :file-list="uploadedStickers"
                          :before-upload="handleBeforeUpload"
                          :on-remove="handleStickerRemove"
                          :on-preview="handlePictureCardPreview"
                        >
                          <el-icon><i class="fa-solid fa-plus"></i></el-icon>
                        </el-upload>
                      </div>
                    </el-form-item>

                    <!-- 预览弹窗 -->
                    <el-dialog v-model="dialogVisible">
                      <img :src="imageUrl" style="width: 100%" alt="Preview">
                    </el-dialog>

                    <el-form-item :label="t('imageDescription')" required>
                      <div class="tag-editor">
                        <div class="tag-item" 
                            v-for="(sticker, index) in uploadedStickers" 
                            :key="index">
                          <img :src="sticker.url" class="sticker-thumb" />
                          <el-input
                            type="textarea"
                            :rows="2"
                            v-model="sticker.description"
                            :placeholder="t('enterDescriptionPlaceholder')"
                          />
                        </div>
                      </div>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <el-button @click="cancelStickerUpload">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary"
                      @click="createStickerPack"
                      :disabled="!newStickerPack.name || uploadedStickers.length === 0"
                      >
                      {{ t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>

              <!-- 在agent_group的内容区添加ComfyUI配置 -->
              <div v-show="subMenu === 'comfyui'" class="page comfyui-container">
                <el-tabs>
                  <!-- 配置选项卡 -->
                  <el-tab-pane :label="t('comfyuiConfig')">
                    <el-form class="settings-form" label-position="top">
                      <div class="tool-item">
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-server"></i></el-icon>
                            {{ t('comfyuiServers') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://platform.comfy.org/profile/api-keys" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoAPI') }}
                            </el-link>
                          </span>
                        </div>
                        <div class="tool-content">
                          <div class="server-item">
                            <el-input 
                              v-model="comfyuiAPIkey" 
                              :placeholder="t('comfyuiAPIKey')"
                              class="full-width-input"
                              show-password
                              @change="autoSaveSettings"
                            >
                            </el-input>
                          </div>
                          <div v-for="(server, index) in comfyuiServers" 
                              :key="index" 
                              class="server-item">
                            <el-input 
                              v-model="comfyuiServers[index]" 
                              placeholder="http://localhost:8188"
                              class="full-width-input"
                              @change="autoSaveSettings"
                            >
                            </el-input>
                            <el-tooltip :content="t('connectComfyUIServer')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="connectComfyUI(index)" 
                                :disabled="comfyuiServers.length === 0 || isConnecting"
                                circle
                              >
                                <template v-if="isConnecting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-plug"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('removeComfyUIServer')" placement="top">
                              <el-button 
                                v-if="index !== 0"
                                @click="removeComfyUIServer(index)"
                                type="danger" 
                                circle>
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                            </el-tooltip>
                          </div>
                          <el-button 
                            @click="addComfyUIServer"
                            type="primary" 
                            class="add-server-btn">
                            <i class="fa-solid fa-plus"></i> {{ t('addServer') }}
                          </el-button>
                        </div>
                      </div>
                      <el-alert
                          :title="t('comfyuiConfigInfo')"
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          1. {{ t('comfyuiConfigInfo1') }}<br>
                          2. {{ t('comfyuiConfigInfo2') }}<br>
                          3. {{ t('comfyuiConfigInfo3') }}<br>
                          4. {{ t('comfyuiConfigInfo4') }}<br>
                          5. {{ t('comfyuiConfigInfo5') }}<br>
                      </el-alert>
                    </el-form>
                  </el-tab-pane>

                  <!-- 展示选项卡 -->
                  <el-tab-pane :label="t('comfyuiDisplay')">
                    <div class="comfyui-iframe-container">
                      <iframe 
                        v-if="activeComfyUIUrl"
                        :src="activeComfyUIUrl" 
                        frameborder="0"
                        class="comfyui-iframe"></iframe>
                      <div v-else class="no-server-tip">
                        <el-empty :description="t('noServerTip')" />
                      </div>
                    </div>
                  </el-tab-pane>

                      <!-- 新增 ComfyUI 工作流转工具选项卡 -->
                  <el-tab-pane :label="t('comfyuiWorkflowTool')">
                  <!-- 磁贴列表 -->
                    <div class="provider-grid">
                      <div v-for="file in workflows" :key="file.unique_filename" class="provider-card knowledge-card">
                        <div class="card-header">
                          <el-switch v-model="file.enabled" @change="autoSaveSettings"></el-switch>
                          <div class="card-actions">
                            <!-- 下载按钮 -->
                            <a :href="`${partyURL}/uploaded_files/${file.unique_filename}`" download target="_blank">
                              <el-button circle size="small" class="file-actions-btn">
                                  <i class="fa-solid fa-download"></i>
                              </el-button>
                            </a>
                            <!-- 删除按钮 -->
                            <el-button
                              type="danger"
                              circle
                              size="small"
                              @click="deleteWorkflow(file.unique_filename)">
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                        <h3>{{ file.original_filename }}</h3>
                        <span>{{ (file.description?.substring(0, 50) + '...') || '' }}</span>
                      </div>
                      <!-- 添加上传按钮 -->
                      <div class="provider-card add-tile" @click="showWorkflowUploadDialog = true">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('uploadWorkflowJson') }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <!-- 工作流上传对话框 -->
                <el-dialog
                  v-model="showWorkflowUploadDialog"
                  :title="t('uploadWorkflowJson')"
                  width="600px"
                >
                  <div class="upload-container">
                    <div
                      class="drop-zone"
                      @dragover.prevent
                      @drop.prevent="handleWorkflowDrop"
                      @click="browseWorkflowFile"
                    >
                      <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                      <p>{{ t('clickOrDrop') }}</p>
                    </div>
                    
                    <!-- 文件列表 -->
                    <div class="compact-file-list" v-if="workflowFile">
                      <div class="compact-file-item">
                        <span class="file-name">@{{ workflowFile.name }}</span>
                        <el-button
                          @click.stop="removeWorkflowFile"
                          class="delete-icon"
                          circle
                        >
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>

                    <div class="input-box" required>
                      <el-input
                        v-model="workflowDescription"
                        type="textarea"
                        :rows="3"
                        :placeholder="t('descriptionPlaceholder')"
                      />
                    </div>

                    <div class="input-box">
                      <!-- 文字输入位置选择 -->
                      <el-select v-model="selectedTextInput" value-key="id"  :placeholder="t('selectTextInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in textInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 文字输入位置选择 -->
                      <el-select v-model="selectedTextInput2" value-key="id"  :placeholder="t('selectTextInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in textInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 图片输入位置选择 -->
                      <el-select v-model="selectedImageInput" value-key="id" :placeholder="t('selectImageInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in imageInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 图片输入位置选择 -->
                      <el-select v-model="selectedImageInput2" value-key="id" :placeholder="t('selectImageInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in imageInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 种子位置选择 -->
                      <el-select v-model="selectedSeedInput" value-key="id" :placeholder="t('selectSeedInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in seedInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 种子位置选择 -->
                      <el-select v-model="selectedSeedInput2" value-key="id" :placeholder="t('selectSeedInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in seedInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('comfyuiWorkflowInfo') }}
                    </el-alert>
                  </div>
                  <template #footer>
                    <el-button @click="cancelWorkflowUpload">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="uploadWorkflow" :disabled="!workflowFile">
                      {{ t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- A2A页面 -->
              <div v-show="subMenu === 'a2a'" class="page a2a-container">
                <div class="provider-grid">
                  <div class="provider-card a2a-card" v-for="(server, url) in a2aServers" :key="url">
                    <div class="card-header">
                      <el-switch v-show="server.status !== 'initializing'" v-model="server.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button  type="info" v-if="server.status === 'initializing'"  circle size="small">
                          <i class="fa-solid fa-spinner"></i>
                        </el-button>
                        <el-button @click="removeA2AServer(url)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="a2a-content">
                      <h3 class="a2a-name">{{ server.name }}</h3>
                      <p class="a2a-description">{{ server.description }}</p>
                      <div class="a2a-skills">
                        <el-tag v-for="(skill, index) in server.skills" :key="index" type="info" size="small">
                          {{ skill }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <div class="provider-card add-tile" @click="showAddA2ADialog = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addA2AServer') }}</div>
                  </div>
                </div>
            
                <!-- 添加A2A服务器对话框 -->
                <el-dialog v-model="showAddA2ADialog" :title="t('addA2AServer')" width="500px" label-position="top">
                  <el-form label-position="top">
                    <el-form-item :label="t('A2AUrl')" required>
                      <el-input v-model="newA2AUrl" placeholder="http://127.0.0.1:5000"></el-input>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <el-button @click="showAddA2ADialog = false">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="addA2AServer"
                      :disabled="!isValidUrl(newA2AUrl)">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- MCP页面 -->
              <div v-show="subMenu === 'mcp'" class="page mcp-container">
                <el-tabs v-model="activeMCPTab">
                  <!-- 记忆配置标签页 -->
                  <el-tab-pane :label="t('addNewMCP')" name="config">
                    <!-- 磁贴网格 -->
                    <div class="provider-grid">
                      <div class="provider-card knowledge-card" v-for="(server, name) in mcpServers" :key="name">
                        <div class="card-header">
                          <el-switch
                            v-show="server.processingStatus !== 'initializing'"
                            :active-value="false"  
                            :inactive-value="true" 
                            v-model="server.disabled"
                            @change="autoSaveSettings"
                            class="kb-switch"
                            :disabled="server.processingStatus === 'server_error'"
                          ></el-switch>
                          <div class="card-actions">
                            <el-button
                              @click="restartMCPServer(name)"
                              type="info"
                              circle
                              size="small"
                            >
                              <i :class="server.processingStatus == 'initializing'?'fa-solid fa-spinner':'fa-solid fa-rotate-right'"></i>
                            </el-button>
                            <el-button
                              @click="editMCPServer(name)"
                              type="primary"
                              circle
                              size="small"
                            >
                              <i class="fa-solid fa-pen-to-square"></i>
                            </el-button>
                            <el-button
                              @click="removeMCPServer(name)"
                              type="danger"
                              circle
                              size="small"
                            >
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                        <div class="kb-content">
                          <div class="kb-header">
                            <h3 class="kb-title">{{ name }}</h3>
                            <el-tag v-if="server?.tools?.length" type="info" size="small">
                              {{ server?.tools?.length }} {{ t('tools') }}
                            </el-tag>
                          </div>
                           <div class="kb-meta">
                            <div class="kb-meta-item">
                              <el-icon class="kb-icon">
                                <i class="fa-solid fa-toolbox"></i>
                              </el-icon>
                              <span>{{ t('clickToolInfo') }}</span>
                            </div>
                            <div v-if="server.processingStatus==='ready' && server.tools && server.tools.length" class="tool-list">
                              <div style="max-height: 200px; overflow-y: auto;">
                                <div
                                  v-for="tool in server.tools"
                                  :key="tool.name"
                                  style="
                                    display: flex;          /* 横向排列 */
                                    align-items: center;    /* 垂直居中 */
                                    gap: 8px;               /* tag 与 switch 间距，可自行调 */
                                    margin: 2px 0;
                                  "
                                >
                                  <!-- tag 保持自然宽度 -->
                                  <el-tag
                                    size="small"
                                    type="info"
                                    effect="plain"
                                    @click="showToolInfo(tool)"
                                    style="cursor: pointer"
                                  >
                                    {{ tool.name }}
                                  </el-tag>

                                  <!-- margin-left:auto 把 switch 挤到最右 -->
                                  <el-switch 
                                    @change="autoSaveSettings"
                                    size="small" 
                                    v-model="tool.enabled" 
                                    style="margin-left: auto;" />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                
                      <!-- 添加新磁贴 -->
                      <div class="provider-card add-tile" @click="showAddMCPDialog = true; this.newMCPJson = '';updateMCPExample()">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addNewMCP') }}</div>
                      </div>
                    </div>

                    <el-dialog
                      v-model="showToolInfoDialog"
                      :title="toolForShowInfo.name"
                      width="400px"
                      >
                      <el-alert
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          {{ toolForShowInfo.description }}
                      </el-alert>
                    </el-dialog>
                    <!-- 添加MCP对话框 -->
                    <el-dialog
                      v-model="showAddMCPDialog"
                      :title="t('addNewMCP')"
                      width="600px"
                      @closed="newMCPJson = ''">
                      <el-form label-position="top">
                        <el-form-item :label="t('serverType')">
                          <el-select 
                            v-model="newMCPType" 
                            @change="updateMCPExample"
                            class="full-width-input">
                            <el-option 
                              :label="t('stdioServer')" 
                              value="stdio">
                            </el-option>
                            <el-option
                              :label="t('sseServer')"
                              value="sse">
                            </el-option>
                            <el-option
                              :label="t('wsServer')"
                              value="ws">
                            </el-option>
                            <el-option
                              :label="t('streamableHttpServer')"
                              value="streamablehttp">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    
                        <el-form-item :label="t('inputMethod')">
                          <el-select 
                            v-model="mcpInputType" 
                            class="full-width-input">
                            <el-option
                              :label="t('formInput')"
                              value="form">
                            </el-option>
                            <el-option 
                              :label="t('jsonInput')" 
                              value="json">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-alert v-if="mcpInputType === 'json'" type="info" :closable="false" class="mb-2">
                          {{ t('mcpJsonFormat') }}
                          <pre class="json-example">{{ currentMCPExample }}</pre>
                        </el-alert>
                    
                        <el-form-item :label="t('mcpJsonInput')" v-if="mcpInputType === 'json'">
                          <el-input
                            v-model="newMCPJson"
                            type="textarea"
                            :rows="8"
                            :placeholder="t('mcpJsonPlaceholder')"
                          />
                        </el-form-item>

                        <el-form-item :label="t('mcpName')" v-if="mcpInputType === 'form'">
                          <el-input
                            v-model="newMCPFormData.name"/>
                        </el-form-item>
                        <el-form-item :label="t('mcpURL')" v-if="mcpInputType === 'form' && newMCPType != 'stdio'">
                          <el-input
                            :placeholder="mcpURLDict[newMCPType]"
                            v-model="newMCPFormData.url"/>
                        </el-form-item>
                        <el-form-item :label="t('mcpApiKey')" v-if="mcpInputType === 'form' && newMCPType != 'stdio'">
                          <el-input
                            :placeholder="t('mcpApiKeyPlaceholder')"
                            v-model="newMCPFormData.apiKey"
                            />
                        </el-form-item>
                        <el-form-item :label="t('mcpCommand')" v-if="mcpInputType === 'form' && newMCPType === 'stdio'">
                          <el-input
                            :placeholder="t('mcpCommandPlaceholder')"
                            v-model="newMCPFormData.command"/>
                        </el-form-item>
                        <el-form-item :label="t('mcpArgs')" v-if="mcpInputType === 'form' && newMCPType === 'stdio'">
                          <el-input
                            :placeholder="t('mcpArgsPlaceholder')"
                            type="textarea"
                            :rows="3"
                            v-model="newMCPFormData.args"
                          />
                        </el-form-item>
                        <el-form-item :label="t('mcpEnv')" v-if="mcpInputType === 'form' && newMCPType === 'stdio'">
                          <el-input
                            :placeholder="t('mcpEnvPlaceholder')"
                            type="textarea"
                            :rows="3"
                            v-model="newMCPFormData.env"
                          />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <el-button @click="showAddMCPDialog = false; this.newMCPJson = ''">{{ t('cancel') }}</el-button>
                        <el-button 
                          type="primary" 
                          @click="addMCPServer"
                          :disabled="!newMCPJson&&!newMCPFormData.name">
                          {{ t('confirmAdd') }}
                        </el-button>
                      </template>
                    </el-dialog>          
                    <el-dialog
                      v-model="showMCPConfirm"
                      :title="t('confirmDeleteTitle')"
                      width="400px"
                      @closed="deletingMCPName = null">
                      <div class="confirm-content">
                        <p>{{ t('confirmDeleteMCP', { name: deletingMCPName }) }}</p>
                        <div class="confirm-buttons">
                          <el-button @click="showMCPConfirm = false">{{ t('cancel') }}</el-button>
                          <el-button type="danger" @click="confirmDeleteMCP">{{ t('confirm') }}</el-button>
                        </div>
                      </div>
                    </el-dialog>
                  </el-tab-pane>
                  <el-tab-pane :label="t('moreMCP')" name="market">
                      <!-- 供应商选择区域 -->
                      <el-form-item>
                        <div class="vendor-grid">
                          <div 
                            v-for="item in MCPvendorOptions" 
                            :key="item.value"
                            class="vendor-card"
                            @click="goToMCPURL(item.value)"
                          >
                            <img 
                              :src="getMCPVendorLogo(item.value)" 
                              :alt="item.label"
                              class="vendor-logo"
                            />
                            <div class="vendor-name">{{ t(item.label) }}</div>
                          </div>
                        </div>
                      </el-form-item>
                  </el-tab-pane>
                </el-tabs>
                
              </div>
              <!-- LLM工具页面 -->
              <div v-show="subMenu === 'llmTool'" class="page llm-tool-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有LLM工具配置 -->
                  <div class="provider-card llm-card" v-for="(tool, id) in llmTools" :key="id">
                    <div class="card-header">
                      <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button @click="removeLLMTool(id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="llm-content">
                      <h3 class="knowledge-info">{{ tool.name }}</h3>
                      <el-tag type="info" size="small">{{ toolTypeLabel(tool.type) }}</el-tag>
                      <p class="knowledge-desc">{{ tool.description || t('noDescription') }}</p>
                    </div>
                  </div>
                  
                  <!-- 添加新LLM工具 -->
                  <div class="provider-card add-tile" @click="showLLMForm = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addLLMTool') }}</div>
                  </div>
                </div>

                <!-- 添加/编辑LLM工具对话框 -->
                <el-dialog v-model="showLLMForm" :title="editingLLM ? t('editLLMTool') : t('addLLMTool')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('toolName')" required>
                      <el-input v-model="newLLMTool.name" :placeholder="t('toolNamePlaceholder')"/>
                    </el-form-item>

                    <el-form-item :label="t('interfaceType')" required>
                      <el-select 
                        v-model="newLLMTool.type" 
                        @change="handleTypeChange"
                        filterable
                        allow-create
                        :placeholder="t('selectInterfaceType')">
                        <el-option
                          v-for="type in llmInterfaceTypes"
                          :key="type.value"
                          :label="type.label"
                          :value="type.value"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item :label="t('description')" required>
                      <el-input
                        v-model="newLLMTool.description"
                        type="textarea"
                        :rows="3"
                        :placeholder="t('descriptionPlaceholder')"
                      />
                    </el-form-item>

                    <el-form-item :label="t('baseURL')" required>
                      <el-input
                        v-model="newLLMTool.base_url"
                        :placeholder="defaultBaseURL"
                      />
                    </el-form-item>

                    <el-form-item :label="t('apiKey')" required>
                      <el-input
                        v-model="newLLMTool.api_key"
                        show-password
                      />
                    </el-form-item>

                    <el-form-item :label="t('modelName')" required>
                      <el-input
                        v-model="newLLMTool.model"
                      >
                      </el-input>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <el-button @click="cancelLLMTool">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="saveLLMTool"
                      :disabled="!formValid">
                      {{ editingLLM ? t('save') : t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 自定义HTTP工具页面 -->
              <div v-show="subMenu === 'customHttpTool'" class="page custom-http-tool-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <div class="provider-card custom-http-tool-card" v-for="tool in customHttpTools" :key="tool.id">
                    <div class="card-header">
                      <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button @click="editCustomHttpTool(tool.id)" type="default" circle size="small">
                          <i class="fa-solid fa-pen-to-square"></i>
                        </el-button>
                        <el-button @click="removeCustomHttpTool(tool.id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="custom-http-tool-content">
                      <h3 class="custom-http-tool-name">{{ tool.name }}</h3>
                      <p class="custom-http-tool-description">{{ tool.description }}</p>
                    </div>
                  </div>
                  <!-- 添加新自定义HTTP工具 -->
                  <div class="provider-card add-tile" @click="showCustomHttpToolForm = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addCustomHttpTool') }}</div>
                  </div>
                </div>

                <!-- 添加/编辑自定义HTTP工具对话框 -->
                <el-dialog v-model="showCustomHttpToolForm" :title="editingCustomHttpTool ? t('editCustomHttpTool') : t('addCustomHttpTool')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('toolName')" required>
                      <el-input v-model="newCustomHttpTool.name" :placeholder="t('HTTPNamePlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('description')" required>
                      <el-input v-model="newCustomHttpTool.description" type="textarea" :rows="3" :placeholder="t('descriptionPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('URL')" required>
                      <el-input v-model="newCustomHttpTool.url" :placeholder="t('urlPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('method')" required>
                      <el-select v-model="newCustomHttpTool.method" placeholder="Select method">
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                        <el-option label="PUT" value="PUT"></el-option>
                        <el-option label="DELETE" value="DELETE"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="t('headers')">
                      <el-input v-model="newCustomHttpTool.headers" type="textarea" :rows="4" :placeholder="t('headersPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('body')">
                      <el-input v-model="newCustomHttpTool.body" type="textarea" :rows="20" :placeholder="t('bodyPlaceholder')"></el-input>
                      <el-alert type="info" :closable="false">
                        {{ t('bodyJsonSchemaFormat') }}
                      </el-alert>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <el-button @click="showCustomHttpToolForm = false">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="saveCustomHttpTool" :disabled="!newCustomHttpTool.name || !newCustomHttpTool.url">
                      {{ editingCustomHttpTool ? t('save') : t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 系统设置页面 -->
        <div v-show="activeMenu === 'system'" class="page tools-container">
          <el-form :model="systemSettings" class="settings-form" label-position="top">
            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-language"></i>
                  </el-icon>
                  {{ t('systemLanguage') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.language"
                    @change="handleSystemLanguageChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in systemlanguageOptions"
                      :key="option.value"
                      :label="t(option.label)"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-brush"></i>
                  </el-icon>
                  {{ t('themeSettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.theme"
                    @change="handleThemeChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in themeOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            
            <div class="tool-item" v-if="isElectron">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-network-wired"></i>
                  </el-icon>
                  {{ t('networkSettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.network"
                    @change="handleNetworkChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in networkOptions"
                      :key="option.value"
                      :label="t(option.label)"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-wifi"></i>
                  </el-icon>
                  {{ t('proxySettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select v-model="systemSettings.proxyMode" placeholder="Select method" @change="updateProxy">
                    <el-option :label="t('systemProxy')" value="system"></el-option>
                    <el-option :label="t('manualProxy')" value="manual"></el-option>
                    <el-option :label="t('noneProxy')" value="none"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item-align">
                  <el-input
                    v-model="systemSettings.proxy"
                    v-show="systemSettings.proxyMode === 'manual'"
                    :placeholder="t('proxyPlaceholder')"
                    class="full-width-input"
                    @input="updateProxy"
                  ></el-input>
                </el-form-item>
              </div>
              <el-alert
                type="info"
                :closable="false"
                class="mb-2"
              >
                <template #default>
                  <div class="alert-content">
                    {{ t('proxyNotice') }}
                  </div>
                </template>
              </el-alert>
            </div>
            <div class="tool-item" v-show="isElectron">
              <div class="browser-mode-btn-container">
                <el-button
                  class="browser-mode-btn"
                  type="primary"
                  @click="openUserfile"
                  round
                  size="large">
                  <span class="ml-2">
                    {{ t('openUserfile') }}
                  </span>
                </el-button>
              </div>
              <el-alert
                type="info"
                :closable="false"
                class="mb-2"
              >
                <template #default>
                  <div class="alert-content">
                    {{ t('userfileNotice') }}
                  </div>
                </template>
              </el-alert>
            </div>
          </el-form>
          <!--eldialog 询问用户是否立即重启-->
          <el-dialog
            :title="t('restartConfirm')"
            v-model="showRestartDialog"
            width="600px">
            <span>{{ t('restartConfirmText') }}</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="showRestartDialog = false">{{ t('cancel') }}</el-button>
                <el-button type="primary" @click="restartApp">{{ t('confirmRestart') }}</el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        <!-- 在内容区添加存储空间界面 -->
        <div v-show="activeMenu === 'storage'" class="page storage-container">
          <div class="suite-layout">
            <!-- 左侧二级导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in storageTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="suite-content">
              <!-- 文本存储 -->
              <div v-show="subMenu === 'text'" class="page text-container">
                <!-- 顶部工具条 -->
                <div class="toolbar">
                  <el-checkbox
                    v-model="allChecked"
                    :indeterminate="indeterminate"
                    @change="toggleAll">
                    {{ t('selectAll') }}
                  </el-checkbox>
                  <el-button
                    type="danger"
                    :disabled="selectedFiles.length === 0"
                    @click="batchDeleteFiles">
                    <i class="fa-solid fa-trash"></i>
                    {{ t('batchDelete') }}
                  </el-button>
                </div>
                <div class="text-list">
                  <!-- 文件列表 -->
                  <div class="file-item" v-for="(file, index) in textFiles" :key="index">
                    <!-- 复选框 -->
                    <el-checkbox
                      v-model="selectedFiles"
                      :label="file.unique_filename"
                      style="margin-right: 10px;"
                      class="checkbox-no-label">  
                    </el-checkbox>
                    <div class="file-info">
                      <span class="file-name">{{ file.original_filename }}</span>
                    </div>
                    <div class="file-actions">
                      <!-- 复制链接按钮 -->
                      <el-button circle size="small" class="file-actions-btn" @click="copyLink(file.unique_filename)">
                        <i class="fa-solid fa-link"></i>
                      </el-button>
                      <!-- 下载按钮 -->
                      <el-button 
                        circle 
                        size="small" 
                        class="file-actions-btn"
                        @click="handleDownload(file)">
                        <i class="fa-solid fa-download"></i>
                      </el-button>
                      <!-- 删除按钮 -->
                      <el-button type="danger" circle size="small" class="file-actions-btn" @click="deleteFile(file)">
                        <i class="fa-solid fa-trash"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 如果文件列表长度为0 -->
                <div v-if="textFiles.length === 0" class="no-files">
                  <el-empty :description="t('noFiles')" />
                </div>
              </div>
              <!-- 图片存储 -->
              <div v-show="subMenu === 'image'" class="page image-container">
                <!-- 新增顶部工具栏 -->
                <div class="toolbar">
                  <el-checkbox
                    v-model="allImagesChecked"
                    :indeterminate="indeterminateImages"
                    @change="toggleAllImages">
                    {{ t('selectAll') }}
                  </el-checkbox>
                  <el-button
                    type="danger"
                    :disabled="selectedImages.length === 0"
                    @click="batchDeleteImages">
                    <i class="fa-solid fa-trash"></i>
                    {{ t('batchDelete') }}
                  </el-button>
                </div>
                <div class="image-grid">
                  <div class="image-item" v-for="(img, index) in imageFiles" :key="index">
                    <img :src="`${partyURL}/uploaded_files/${img.unique_filename}`" @click="previewImage(img)" class="thumbnail"/>
                    <div class="image-overlay">
                      <!-- 复选框 -->
                      <el-checkbox
                        v-model="selectedImages"
                        :label="img.unique_filename"
                        class="checkbox-no-label">
                      </el-checkbox>
                      <div class="image-actions">
                        <!-- 复制链接按钮 -->
                        <el-button circle size="small" class="image-actions-btn" @click="copyLink(img.unique_filename)">
                          <i class="fa-solid fa-link"></i>
                        </el-button>
                        
                        <!-- 下载按钮 -->
                      <el-button 
                        circle 
                        size="small" 
                        class="image-actions-btn"
                        @click="handleDownload(img)">
                        <i class="fa-solid fa-download"></i>
                      </el-button>
                        
                        <el-button type="danger" class="image-actions-btn" circle size="small" @click="deleteImage(img)">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="imageFiles.length === 0" class="no-Images">
                  <el-empty :description="t('noImages')" />
                </div>
                <el-dialog
                  v-model="previewVisible"
                  :title="t('preview')"
                  class="image-preview-dialog"
                  width="600px">
                  <div class="preview-container">
                    <img 
                      :src="previewImageUrl" 
                      class="preview-image"
                      alt="Preview"
                    />
                  </div>
                </el-dialog>
              </div>
              <!-- 视频存储 -->
              <div v-show="subMenu === 'video'" class="page video-container">
                <!-- 新增顶部工具栏 -->
                <div class="toolbar">
                  <el-checkbox
                    v-model="allVideosChecked"
                    :indeterminate="indeterminateVideos"
                    @change="toggleAllVideos">
                    {{ t('selectAll') }}
                  </el-checkbox>
                  <el-button
                    type="danger"
                    :disabled="selectedVideos.length === 0"
                    @click="batchDeleteVideos">
                    <i class="fa-solid fa-trash"></i>
                    {{ t('batchDelete') }}
                  </el-button>
                </div>
                <div class="video-list">
                  <div class="video-item" v-for="(video, index) in videoFiles" :key="index">
                    <div class="video-wrapper">
                      <!-- 视频播放器 -->
                      <video controls>
                        <source :src="`${partyURL}/uploaded_files/${video.unique_filename}`" type="video/mp4">
                        Your browser does not support the video tag.
                      </video>
                      <!-- 复选框 -->
                      <el-checkbox
                        v-model="selectedVideos"
                        :label="video.unique_filename"
                        class="checkbox-no-label">
                      </el-checkbox>
                      <!-- 删除按钮定位在视频右上角 -->
                      <el-button class="delete-overlay-btn" type="danger" circle @click="deleteVideo(video)">
                        <i class="fa-solid fa-trash"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div v-if="videoFiles.length === 0" class="no-Videos">
                  <el-empty :description="t('noVideos')" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- logo页面 -->
        <div v-show="activeMenu === 'logo'" class="page logo-container">
          <div class="license-notice">
            <h1>Super Agent Party v0.3.3</h1>
            <h3>开源协议声明 / Open Source License</h3>
            <div class="notice-section">
              <p>❗ 注意！本项目是基于AGPL协议开源的，请遵守AGPL协议，以避免不必要的法律问题！</p>
              <p>❗ Attention! This project is open source based on the AGPL agreement, please abide by the AGPL agreement to avoid unnecessary legal problems!</p>
            </div>

            <div class="contact-section">
              <h3>联系我们 / Contact</h3>
              <div class="contact-card">
                <p>商业授权咨询：
                  <a href="mailto:hst97@qq.com" class="contact-link">hst97@qq.com</a>
                </p>
                <p>Commercial License：
                  <a href="mailto:hst97@qq.com" class="contact-link">hst97@qq.com</a>
                </p>
              </div>
            </div>

            <div class="social-links">
              <div class="link-item">
                <el-icon class="logo-icon">
                  <i class="fa-solid fa-pager"></i>
                </el-icon>
                <span>Official Website：</span>
                <a href="https://super-agent-party.github.io/" 
                  target="_blank" 
                  class="social-link">
                  super-agent-party.github.io
                </a>
              </div>

              <div class="link-item">
                <el-icon class="logo-icon">
                  <i class="fa-brands fa-github"></i>
                </el-icon>
                <span>GitHub：</span>
                <a href="https://github.com/heshengtao/super-agent-party" 
                  target="_blank" 
                  class="social-link">
                  heshengtao/super-agent-party
                </a>
              </div>
              
              <div class="link-item">
                <el-icon class="logo-icon">
                  <i class="fa-brands fa-gitter"></i>
                </el-icon>
                <span>Gitee：</span>
                <a href="https://gitee.com/heshengtao/super-agent-party" 
                  target="_blank" 
                  class="social-link">
                  heshengtao/super-agent-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-bilibili"></i>
                </el-icon>
                <span>Bilibili：</span>
                <a href="https://space.bilibili.com/26978344" 
                  target="_blank" 
                  class="social-link">
                  @派酱llm-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-youtube"></i>
                </el-icon>
                <span>Youtube：</span>
                <a href="https://www.youtube.com/@agentParty" 
                  target="_blank" 
                  class="social-link">
                  @agentParty
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-discord"></i>
                </el-icon>
                <span>discord：</span>
                <a href="https://discord.com/invite/f2dsAKKr2V" 
                  target="_blank" 
                  class="social-link">
                  @llm-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-qq"></i>
                </el-icon>
                <span>QQ交流群：</span>
                <span class="qq-group">931057213</span>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-solid fa-file"></i>
                </el-icon>
                <span>中文文档：</span>
                <a href="https://gcnij7egmcww.feishu.cn/wiki/DPRKwdetCiYBhPkPpXWcugujnRc" 
                  target="_blank" 
                  class="social-link">
                  点击访问
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-solid fa-file"></i>
                </el-icon>
                <span>English Doc：</span>
                <a href="https://temporal-lantern-7e8.notion.site/super-agent-party-211b2b2cb6f180c899d1c27a98c4965d" 
                  target="_blank" 
                  class="social-link">
                  Click to access
                </a>
              </div>
            </div>

            <div class="agreement-section">
              <p>{{t('agplNotice')}}
                <a href="https://www.gnu.org/licenses/agpl-3.0.html" 
                  target="_blank" 
                  class="agreement-link">
                  GNU Affero General Public License v3.0
                </a>
              </p>
              <p>{{t('thirdPartyNotice')}}
                <a href="https://github.com/heshengtao/super-agent-party/tree/main/LICENSE-third-party" class="agreement-link">LICENSE-third-party</a>
              </p>
            </div>
          </div>
        </div>
        <div v-show="activeMenu === 'deploy-bot'" class="page deploy-container">
            <div class="suite-layout">
                <!-- 左侧导航 -->
                <div class="suite-sidebar">
                    <div class="tile-nav">
                        <div 
                            v-for="tile in deployTiles" 
                            class="nav-item"
                            :class="{ active: subMenu === tile.id }"
                            @click="subMenu = tile.id">
                            <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                            <span class="nav-text">{{ t(tile.title) }}</span>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧内容 -->
                <div class="suite-content">
                  <!-- 通用配置页面 -->
                  <div v-show="subMenu === 'bot_config'">
                    <el-form class="settings-form" :model="BotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 通用配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-robot"></i></el-icon>
                            {{ t('bot_config') }} <!-- 本地化文本 -->
                          </span>
                        </div>
                        <div class="tool-item">
                          <div class="tool-header">
                            <div class="header-left">
                              <span>
                                {{t('imgHost')}}
                              </span>
                            </div>
                            <el-switch v-model="BotConfig.imgHost_enabled" @click.stop @change="autoSaveSettings"/>
                          </div>
                          <div class="tool-content">
                            <!-- 图床/文件床配置 -->
                            <el-form-item :label="t('imgHostType')">
                              <template #label>
                                  <span>
                                    {{ t('imgHostType') }}
                                    <el-link
                                      v-if="BotConfig.imgHost === 'smms'"
                                      type="primary"
                                      :underline="false"
                                      href="https://sm.ms/" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'easyImage2'"
                                      type="primary"
                                      :underline="false"
                                      href="https://github.com/icret/EasyImages2.0" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoEasyImage2Github') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'github'"
                                      type="primary"
                                      :underline="false"
                                      href="https://github.com/settings/tokens" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'gitee'"
                                      type="primary"
                                      :underline="false"
                                      href="https://gitee.com/profile/personal_access_tokens" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                  </span>
                              </template>
                              <el-select 
                                v-model="BotConfig.imgHost"
                                @change="changeImgHost">
                                <el-option
                                  v-for="option in imgHostOptions"
                                  :key="option.value"
                                  :label="option.label"
                                  :value="option.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <!--sm.ms图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'smms'" :label="t('apiKey')">
                              <el-input
                                v-model="BotConfig.SMMS_api_key"
                                :placeholder="t('apiKeyPlaceholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--gitee图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('repo_owner')">
                              <el-input
                                v-model="BotConfig.gitee_repo_owner"
                                :placeholder="t('repo_owner_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('repo_name')">
                              <el-input
                                v-model="BotConfig.gitee_repo_name"
                                :placeholder="t('repo_name_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('branch')">
                              <el-input
                                v-model="BotConfig.gitee_branch"
                                :placeholder="t('branch_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('token')">
                              <el-input
                                v-model="BotConfig.gitee_token"
                                :placeholder="t('token_placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--github图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('repo_owner')">
                              <el-input
                                v-model="BotConfig.github_repo_owner"
                                :placeholder="t('repo_owner_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('repo_name')">
                              <el-input
                                v-model="BotConfig.github_repo_name"
                                :placeholder="t('repo_name_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('branch')">
                              <el-input
                                v-model="BotConfig.github_branch"
                                :placeholder="t('branch_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('token')">
                              <el-input
                                v-model="BotConfig.github_token"
                                :placeholder="t('token_placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--easyimage2图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'easyImage2'" :label="t('baseURL')">
                              <el-input
                                v-model="BotConfig.EI2_base_url"
                                placeholder="https://png.cm/api/index.php"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'easyImage2'"  :label="t('apiKey')">
                              <el-input
                                v-model="BotConfig.EI2_api_key"
                                :placeholder="t('apiKeyPlaceholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                          </div>
                        </div>
                      </div>
                    </el-form>
                  </div>
                  <!-- QQ机器人配置页面 -->
                  <div v-show="subMenu === 'qq_bot'">
                    <el-form class="settings-form" :model="qqBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- QQ机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-brands fa-qq"></i></el-icon>
                            {{ t('qq_bot_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://q.qq.com/" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoQQbot') }}
                            </el-link>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://q.qq.com/#/news/detail?id=1376238e8e2fbbc036676bb09d2f37da" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-file"></i>
                              </el-icon>{{ t('QQbotNotice') }}
                            </el-link>
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startQQBot" 
                                :disabled="!isQQBotConfigValid || isQQBotRunning || isStarting"
                                circle
                              >
                                <template v-if="isStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 停止按钮 -->
                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="stopQQBot" 
                                :disabled="!isQQBotRunning || isStopping"
                                circle
                              >
                                <template v-if="isStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 重载按钮 -->
                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button 
                                @click="reloadQQBotConfig" 
                                :disabled="!isQQBotRunning || isReloading"
                                circle
                              >
                                <template v-if="isReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="tool-content">
                            <!-- 主智能体选择 -->
                            <el-form-item :label="t('mainAgent')" required>
                              <el-select 
                                v-model="qqBotConfig.QQAgent"
                                @change="changeQQAgent">
                                <el-option
                                  :label="t('defaultAgent')"
                                  value="super-model"
                                >
                                </el-option>
                                <el-option
                                  v-for="(agent, id) in agents"
                                  :key="id"
                                  :label="agent.name"
                                  :value="id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('goToMainAgentNotice1') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToMainAgent"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('MainAgentInterface') }}
                                  </el-link>
                                </div>
                              </template>
                            </el-alert>
                            <!-- 角色卡选择 -->
                            <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                              <el-switch 
                              v-model="memorySettings.is_memory" 
                              @click.stop @change="changeMemory" 
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('selectMemory')">
                              <el-select 
                                v-model="memorySettings.selectedMemory" 
                                :placeholder="t('selectMemoryPlaceholder')"
                                class="full-width-input"
                                @change ="changeMemory"
                                >
                                <el-option
                                  v-for="memory in memories"
                                  :key="memory.id"
                                  :label="memory.name"
                                  :value="memory.id"
                                />
                              </el-select>
                            </el-form-item>
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('goToMemoryNotice1') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToMemory"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('memoryInterface') }}
                                  </el-link>
                                </div>
                              </template>
                            </el-alert>
                            <el-form-item :label="t('separators')">
                              <el-select
                                v-model="qqBotConfig.separators"
                                multiple
                                filterable
                                allow-create
                                @keyup.enter.native="handleEnter"
                                @create="handleCreateSeparator"
                                @change="autoSaveSettings"
                              >
                                <el-option
                                  v-for="sep in filteredSeparators"
                                  :key="sep.value"
                                  :label="sep.label"
                                  :value="sep.value"
                                />
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('conversationRounds')" class="form-item-align">
                              <el-slider
                                v-model="qqBotConfig.memoryLimit"
                                :min="0"
                                :max="1000"
                                :step="2"
                                show-input
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="qqBotConfig.reasoningVisible"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('is_sandbox')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="qqBotConfig.is_sandbox"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="qqBotConfig.quickRestart"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item label="APP ID" required>
                                <el-input @change="autoSaveSettings" v-model="qqBotConfig.appid" :placeholder="t('enter_qq_bot_app_id')" class="full-width-input"></el-input>
                            </el-form-item>
                            <el-form-item label="APP Secret" required>
                                <el-input @change="autoSaveSettings" v-model="qqBotConfig.secret" :placeholder="t('enter_qq_bot_secret')" show-password class="full-width-input"></el-input>
                            </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- 飞书机器人配置页面 -->
                  <div v-show="subMenu === 'feishu_bot'">
                    <el-form class="settings-form" :model="feishuBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 飞书机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-paper-plane"></i></el-icon>
                            {{ t('feishu_bot_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://open.feishu.cn/app"
                              target="_blank"
                            >
                              <el-icon class="mr-1"><i class="fa-solid fa-key"></i></el-icon>
                              {{ t('gotoFeishuBot') }}
                            </el-link>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://open.feishu.cn/document/develop-an-echo-bot/introduction?from=op_develop_app"
                              target="_blank"
                            >
                              <el-icon class="mr-1"><i class="fa-solid fa-file"></i></el-icon>
                              {{ t('feishuBotNotice') }}
                            </el-link>
                          </span>

                          <!-- 按钮组 -->
                          <div>
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button
                                type="primary"
                                @click="startFeishuBot"
                                :disabled="!isfeishuBotConfigValid || isFeishuBotRunning || isFeishuStarting"
                                circle
                              >
                                <template v-if="isFeishuStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button
                                type="danger"
                                @click="stopFeishuBot"
                                :disabled="!isFeishuBotRunning || isFeishuStopping"
                                circle
                              >
                                <template v-if="isFeishuStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button
                                @click="reloadfeishuBotConfig"
                                :disabled="!isFeishuBotRunning || isFeishuReloading"
                                circle
                              >
                                <template v-if="isFeishuReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>

                        <!-- 表单内容 -->
                        <div class="tool-content">
                          <!-- 主智能体 -->
                          <el-form-item :label="t('mainAgent')" required>
                            <el-select v-model="feishuBotConfig.FeishuAgent" @change="autoSaveSettings">
                              <el-option :label="t('defaultAgent')" value="super-model" />
                              <el-option
                                v-for="(agent, id) in agents"
                                :key="id"
                                :label="agent.name"
                                :value="id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 角色卡 / 记忆 -->
                          <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="memorySettings.is_memory"
                              @change="changeMemory"
                            ></el-switch>
                          </el-form-item>
                          <el-form-item :label="t('selectMemory')">
                            <el-select
                              v-model="memorySettings.selectedMemory"
                              :placeholder="t('selectMemoryPlaceholder')"
                              class="full-width-input"
                              @change="changeMemory"
                            >
                              <el-option
                                v-for="mem in memories"
                                :key="mem.id"
                                :label="mem.name"
                                :value="mem.id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 分隔符 -->
                          <el-form-item :label="t('separators')">
                            <el-select
                              v-model="feishuBotConfig.separators"
                              multiple
                              filterable
                              allow-create
                              @create="handleCreateFeishuSeparator"
                              @change="autoSaveSettings"
                            >
                              <el-option
                                v-for="sep in filteredFeishuSeparators"
                                :key="sep.value"
                                :label="sep.label"
                                :value="sep.value"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 记忆轮数 -->
                          <el-form-item :label="t('conversationRounds')" class="form-item-align">
                            <el-slider
                              v-model="feishuBotConfig.memoryLimit"
                              :min="0"
                              :max="1000"
                              :step="2"
                              show-input
                              @input="autoSaveSettings"
                            />
                          </el-form-item>

                          <!-- 推理显示 -->
                          <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="feishuBotConfig.reasoningVisible"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- 快速重启 -->
                          <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="feishuBotConfig.quickRestart"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- 启用TTS -->
                          <el-form-item :label="t('enableTTS')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="feishuBotConfig.enableTTS"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- APP 凭证 -->
                          <el-form-item label="APP ID" required>
                            <el-input
                              v-model="feishuBotConfig.appid"
                              :placeholder="t('enter_feishu_bot_app_id')"
                              class="full-width-input"
                              @change="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-form-item label="APP Secret" required>
                            <el-input
                              v-model="feishuBotConfig.secret"
                              :placeholder="t('enter_feishu_bot_secret')"
                              show-password
                              class="full-width-input"
                              @change="autoSaveSettings"
                            />
                          </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- Telegram 机器人配置页面 -->
                  <div v-show="subMenu === 'telegram_bot'">
                    <el-form class="settings-form" :model="telegramBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-paper-plane"></i></el-icon>
                            {{ t('telegram_bot_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://t.me/BotFather"
                              target="_blank"
                            >
                              <el-icon class="mr-1"><i class="fa-solid fa-key"></i></el-icon>
                              {{ t('gotoTelegramBot') }}
                            </el-link>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://core.telegram.org/bots/api"
                              target="_blank"
                            >
                              <el-icon class="mr-1"><i class="fa-solid fa-file"></i></el-icon>
                              {{ t('telegramBotNotice') }}
                            </el-link>
                          </span>

                          <!-- 按钮组 -->
                          <div>
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button
                                type="primary"
                                @click="startTelegramBot"
                                :disabled="!isTelegramBotConfigValid || isTelegramBotRunning || isTelegramStarting"
                                circle
                              >
                                <template v-if="isTelegramStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button
                                type="danger"
                                @click="stopTelegramBot"
                                :disabled="!isTelegramBotRunning || isTelegramStopping"
                                circle
                              >
                                <template v-if="isTelegramStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button
                                @click="reloadTelegramBotConfig"
                                :disabled="!isTelegramBotRunning || isTelegramReloading"
                                circle
                              >
                                <template v-if="isTelegramReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>

                        <!-- 表单 -->
                        <div class="tool-content">
                          <!-- 主智能体 -->
                          <el-form-item :label="t('mainAgent')" required>
                            <el-select v-model="telegramBotConfig.TelegramAgent" @change="autoSaveSettings">
                              <el-option :label="t('defaultAgent')" value="super-model" />
                              <el-option
                                v-for="(agent, id) in agents"
                                :key="id"
                                :label="agent.name"
                                :value="id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 角色卡 / 记忆 -->
                          <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="memorySettings.is_memory"
                              @change="changeMemory"
                            ></el-switch>
                          </el-form-item>
                          <el-form-item :label="t('selectMemory')">
                            <el-select
                              v-model="memorySettings.selectedMemory"
                              :placeholder="t('selectMemoryPlaceholder')"
                              class="full-width-input"
                              @change="changeMemory"
                            >
                              <el-option
                                v-for="mem in memories"
                                :key="mem.id"
                                :label="mem.name"
                                :value="mem.id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 分隔符 -->
                          <el-form-item :label="t('separators')">
                            <el-select
                              v-model="telegramBotConfig.separators"
                              multiple
                              filterable
                              allow-create
                              @create="handleCreateTelegramSeparator"
                              @change="autoSaveSettings"
                            >
                              <el-option
                                v-for="sep in filteredTelegramSeparators"
                                :key="sep.value"
                                :label="sep.label"
                                :value="sep.value"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 记忆轮数 -->
                          <el-form-item :label="t('conversationRounds')" class="form-item-align">
                            <el-slider
                              v-model="telegramBotConfig.memoryLimit"
                              :min="0"
                              :max="1000"
                              :step="2"
                              show-input
                              @input="autoSaveSettings"
                            />
                          </el-form-item>

                          <!-- 推理显示 -->
                          <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="telegramBotConfig.reasoningVisible"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- 快速重启 -->
                          <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="telegramBotConfig.quickRestart"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- 启用 TTS -->
                          <el-form-item :label="t('enableTTS')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="telegramBotConfig.enableTTS"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>

                          <!-- Bot Token -->
                          <el-form-item label="Bot Token" required>
                            <el-input
                              v-model="telegramBotConfig.bot_token"
                              :placeholder="t('enterTelegramBotToken')"
                              show-password
                              class="full-width-input"
                              @change="autoSaveSettings"
                            />
                          </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- Discord 机器人配置页面 -->
                  <div v-show="subMenu === 'discord_bot'">
                    <el-form class="settings-form" :model="discordBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-brands fa-discord"></i></el-icon>
                            {{ t('discord_bot_config') }}
                            <el-link type="primary" :underline="false" href="https://discord.com/developers/applications" target="_blank">
                              <el-icon class="mr-1"><i class="fa-solid fa-key"></i></el-icon>
                              {{ t('gotoDiscordBot') }}
                            </el-link>
                            <el-link type="primary" :underline="false" href="https://discord.com/developers/docs/intro" target="_blank">
                              <el-icon class="mr-1"><i class="fa-solid fa-file"></i></el-icon>
                              {{ t('discordBotNotice') }}
                            </el-link>
                          </span>

                          <!-- 按钮组 -->
                          <div>
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button
                                type="primary"
                                @click="startDiscordBot"
                                :disabled="!isDiscordBotConfigValid || isDiscordBotRunning || isDiscordStarting"
                                circle
                              >
                                <template v-if="isDiscordStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button
                                type="danger"
                                @click="stopDiscordBot"
                                :disabled="!isDiscordBotRunning || isDiscordStopping"
                                circle
                              >
                                <template v-if="isDiscordStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>

                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button
                                @click="reloadDiscordBot"
                                :disabled="!isDiscordBotRunning || isDiscordReloading"
                                circle
                              >
                                <template v-if="isDiscordReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>

                        <!-- 表单 -->
                        <div class="tool-content">
                          <!-- 主智能体 -->
                          <el-form-item :label="t('mainAgent')" required>
                            <el-select v-model="discordBotConfig.llm_model" @change="autoSaveSettings">
                              <el-option :label="t('defaultAgent')" value="super-model" />
                              <el-option
                                v-for="(agent, id) in agents"
                                :key="id"
                                :label="agent.name"
                                :value="id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 记忆 -->
                          <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                            <el-switch v-model="memorySettings.is_memory" @change="changeMemory"></el-switch>
                          </el-form-item>
                          <el-form-item :label="t('selectMemory')">
                            <el-select
                              v-model="memorySettings.selectedMemory"
                              :placeholder="t('selectMemoryPlaceholder')"
                              class="full-width-input"
                              @change="changeMemory"
                            >
                              <el-option
                                v-for="mem in memories"
                                :key="mem.id"
                                :label="mem.name"
                                :value="mem.id"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 分隔符 -->
                          <el-form-item :label="t('separators')">
                            <el-select
                              v-model="discordBotConfig.separators"
                              multiple
                              filterable
                              allow-create
                              @create="handleCreateDiscordSeparator"
                              @change="autoSaveSettings"
                            >
                              <el-option
                                v-for="sep in filteredDiscordSeparators"
                                :key="sep.value"
                                :label="sep.label"
                                :value="sep.value"
                              />
                            </el-select>
                          </el-form-item>

                          <!-- 记忆轮数 -->
                          <el-form-item :label="t('conversationRounds')" class="form-item-align">
                            <el-slider
                              v-model="discordBotConfig.memory_limit"
                              :min="0"
                              :max="1000"
                              :step="2"
                              show-input
                              @input="autoSaveSettings"
                            />
                          </el-form-item>

                          <!-- 推理显示 -->
                          <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                            <el-switch v-model="discordBotConfig.reasoning_visible" @change="autoSaveSettings"></el-switch>
                          </el-form-item>

                          <!-- 快速重启 -->
                          <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                            <el-switch v-model="discordBotConfig.quick_restart" @change="autoSaveSettings"></el-switch>
                          </el-form-item>

                          <!-- 启用 TTS -->
                          <el-form-item :label="t('enableTTS')" class="form-item-align" label-position="left">
                            <el-switch v-model="discordBotConfig.enable_tts" @change="autoSaveSettings"></el-switch>
                          </el-form-item>

                          <!-- Bot Token -->
                          <el-form-item label="Bot Token" required>
                            <el-input
                              v-model="discordBotConfig.token"
                              show-password
                              :placeholder="t('enterDiscordBotToken')"
                              class="full-width-input"
                              @change="autoSaveSettings"
                            />
                          </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- 翻译机器人 -->
                  <div v-show="subMenu === 'translate_bot'" class="page translate-container">
                    <el-form class="settings-form" label-position="top">
                      <div class="tool-item">

                        <!-- 头部 -->
                        <div class="tool-header">
                          <span>
                            <el-icon><i class="fa-solid fa-language"></i></el-icon>
                            {{ t('translateBot') }}
                          </span>

                          <div class="header-buttons">
                            <!-- 复制 -->
                            <el-tooltip :content="t('copy')" placement="top">
                              <el-button circle @click="copyTranslated">
                                <i class="fa-solid fa-copy"></i>
                              </el-button>
                            </el-tooltip>

                            <!-- 翻译 -->
                            <el-tooltip :content="t('translate')" placement="top">
                              <el-button
                                type="primary"
                                circle
                                :disabled="!sourceText.trim() || isTranslating"
                                @click="handleTranslate"
                              >
                                <i v-if="isTranslating" class="fa-solid fa-spinner fa-spin"></i>
                                <i v-else class="fa-solid fa-play"></i>
                              </el-button>
                            </el-tooltip>

                            <!-- 停止 -->
                            <el-tooltip :content="t('stop')" placement="top">
                              <el-button
                                type="danger"
                                circle
                                :disabled="!isTranslating"
                                @click="abortTranslate"
                              >
                                <i class="fa-solid fa-stop"></i>
                              </el-button>
                            </el-tooltip>

                            <!-- 清空 -->
                            <el-tooltip :content="t('clear')" placement="top">
                              <el-button type="danger" circle @click="clearAll">
                                <i class="fa-solid fa-broom"></i>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>

                        <!-- 目标语言 -->
                        <el-form-item :label="t('targetLang')" style="margin-bottom:12px;" label-position="left">
                          <el-select
                            v-model="targetLangSelected"
                            filterable
                            allow-create
                            default-first-option
                            :placeholder="t('targetLangPlaceholder')"
                            @change="changeLanguage"
                            style="width:220px"
                          >
                            <el-option :label="t('systemLanguage')" value="system"></el-option>
                            <el-option label="简体中文" value="简体中文"></el-option>
                            <el-option label="繁體中文" value="繁體中文"></el-option>
                            <el-option label="English" value="English"></el-option>
                            <el-option label="Français" value="Français"></el-option>
                            <el-option label="Язык" value="Язык"></el-option>
                            <el-option label="Deutsch" value="Deutsch"></el-option>
                            <el-option label="Español" value="Español"></el-option>
                            <el-option label="Portuguese" value="Portuguese"></el-option>
                            <el-option label="日本語" value="日本語"></el-option>
                            <el-option label="한국어" value="한국어"></el-option>
                          </el-select>
                        </el-form-item>

                        <!-- 经典并排 -->
                        <div class="classic-box">
                          <div class="classic-panel">
                            <el-input
                              v-model="sourceText"
                              type="textarea"
                              :rows="24"
                              :placeholder="t('sourceTextPlaceholder')"
                              resize="none"
                            ></el-input>
                          </div>

                          <div class="classic-panel">
                            <el-input
                              v-model="translatedText"
                              :placeholder="t('translatedTextPlaceholder')"
                              type="textarea"
                              :rows="24"
                              readonly
                              resize="none"
                            ></el-input>
                          </div>
                        </div>

                      </div>
                    </el-form>
                  </div>

                  <!-- 桌宠配置页面 -->
                  <div v-show="subMenu === 'table_pet'">
                    <el-form class="settings-form" :model="VRMConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 桌宠机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-user-ninja"></i></el-icon>
                            {{ t('table_pet_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://vroid.com/en/studio" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoVroid') }}
                            </el-link>
                            <span>{{ '  ' }}</span>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://hub.vroid.com/en" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-cube"></i>
                              </el-icon>{{ t('gotoVroidHub') }}
                            </el-link>
                            <span>{{ '  ' }}</span>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://www.aplaybox.com/search?value=VRM" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-cube"></i>
                              </el-icon>{{ t('gotoAplaybox') }}
                            </el-link>
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_table_pet')" placement="top">
                              <el-button 
                                v-if="isElectron"
                                type="primary" 
                                @click="startVRM" 
                                circle
                              >
                                <template v-if="isVRMStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            <!-- 在浏览器启动按钮 -->
                            <el-tooltip :content="t('start_table_pet_web')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startVRMweb" 
                                circle
                              >
                                <template v-if="isVRMStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-window-maximize"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="tool-content">
                            <!-- 主智能体选择 -->
                            <el-form-item :label="t('mainAgent')" required>
                              <el-select 
                                v-model="mainAgent"
                                @change="autoSaveSettings">
                                <el-option
                                  :label="t('defaultAgent')"
                                  value="super-model"
                                >
                                </el-option>
                                <el-option
                                  v-for="(agent, id) in agents"
                                  :key="id"
                                  :label="agent.name"
                                  :value="id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('goToMainAgentNotice1') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToMainAgent"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('MainAgentInterface') }}
                                  </el-link>
                                </div>
                              </template>
                            </el-alert>
                            <!-- 角色卡选择 -->
                            <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                              <el-switch 
                              v-model="memorySettings.is_memory" 
                              @click.stop @change="changeMemory" 
                              />
                            </el-form-item>
                            <el-form-item :label="t('selectMemory')">
                              <el-select 
                                v-model="memorySettings.selectedMemory" 
                                :placeholder="t('selectMemoryPlaceholder')"
                                class="full-width-input"
                                @change ="changeMemory"
                                >
                                <el-option
                                  v-for="memory in memories"
                                  :key="memory.id"
                                  :label="memory.name"
                                  :value="memory.id"
                                />
                              </el-select>
                            </el-form-item>
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('goToMemoryNotice1') }}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    class="font-medium"
                                    @click="switchToMemory"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('memoryInterface') }}
                                  </el-link>
                                </div>
                              </template>
                            </el-alert>
                            <el-form-item :label="t('windowWidth')" class="form-item-align">
                              <el-slider
                                v-model="VRMConfig.windowWidth"
                                :min="450"
                                :max="2560"
                                :step="10"
                                show-input
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('windowHeight')" class="form-item-align">
                              <el-slider
                                v-model="VRMConfig.windowHeight"
                                :min="450"
                                :max="2560"
                                :step="10"
                                show-input
                                @change="autoSaveSettings"
                              />
                            </el-form-item>

                            <el-form-item :label="t('enabledExpressions')" class="form-item-align" label-position="left">
                              <el-switch 
                                v-model="VRMConfig.enabledExpressions" 
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            
                            <el-form-item :label="t('asyncTools')" class="form-item-align" label-position="left">
                              <el-switch 
                                v-model="toolsSettings.asyncTools.enabled" 
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>

                            <!-- VRM模型选择框 -->
                            <el-form-item :label="t('selectVrmModel')">
                              <el-select
                                v-model="VRMConfig.selectedModelId"
                                @change="handleModelChange"
                                class="full-width-input"
                              >
                                <!-- 默认模型分组 -->
                                <el-option-group :label="t('defaultModels')">
                                  <el-option
                                    v-for="model in VRMConfig.defaultModels"
                                    :key="model.id"
                                    :label="model.name"
                                    :value="model.id"
                                  >
                                    <div class="model-option-item">
                                      <!-- 图标在最前 -->
                                      <i class="fa-solid fa-star" style="color: #f39c12; margin-right: 6px;"></i>
                                      <span>{{ model.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>

                                <!-- 用户上传模型分组 -->
                                <el-option-group :label="t('userModels')" v-if="VRMConfig.userModels.length > 0">
                                  <el-option
                                    v-for="model in VRMConfig.userModels"
                                    :key="model.id"
                                    :label="model.name"
                                    :value="model.id"
                                  >
                                    <div class="model-option-item">
                                      <!-- 图标在最前 -->
                                      <i
                                        class="fa-solid fa-trash-can"
                                        style="color: #ff0000; margin-right: 6px;"
                                        @click.stop="deleteModelOption(model.id)"
                                      ></i>
                                      <span>{{ model.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>
                              </el-select>

                              <!-- 模型上传按钮 -->
                              <el-button
                                @click="showVrmModelDialog = true"
                                type="primary"
                                class="add-server-btn"
                              >
                                <i class="fa-solid fa-plus"></i> {{ t('addVrmModel') }}
                              </el-button>
                            </el-form-item>

                            <!-- VRMA动作选择框（已统一） -->
                            <el-form-item :label="t('selectVrmaMotions')">
                              <el-select
                                v-model="VRMConfig.selectedMotionIds"
                                @change="handleMotionChange"
                                class="full-width-input"
                                multiple
                              >
                                <!-- 默认动作分组 -->
                                <el-option-group :label="t('defaultMotions')">
                                  <el-option
                                    v-for="motion in VRMConfig.defaultMotions"
                                    :key="motion.id"
                                    :label="motion.name"
                                    :value="motion.id"
                                  >
                                    <div class="motion-option-item">
                                      <i class="fa-solid fa-star" style="color: #f39c12; margin-right: 6px;"></i>
                                      <span>{{ motion.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>

                                <!-- 用户上传动作分组 -->
                                <el-option-group :label="t('userMotions')" v-if="VRMConfig.userMotions.length > 0">
                                  <el-option
                                    v-for="motion in VRMConfig.userMotions"
                                    :key="motion.id"
                                    :label="motion.name"
                                    :value="motion.id"
                                  >
                                    <div class="motion-option-item">
                                      <i
                                        class="fa-solid fa-trash-can"
                                        style="color: #ff0000; margin-right: 6px;"
                                        @click.stop="deleteMotionOption(motion.id)"
                                      ></i>
                                      <span>{{ motion.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>
                              </el-select>

                              <!-- 动作上传按钮 -->
                              <el-button
                                @click="showVrmaMotionDialog = true"
                                type="success"
                                class="add-server-btn"
                              >
                                <i class="fa-solid fa-plus"></i> {{ t('addVrmaMotion') }}
                              </el-button>
                            </el-form-item>
                            
                            <!-- 高斯场景选择框  GAUSS -->
                            <el-form-item :label="t('selectGaussScene')">
                              <el-select
                                v-model="VRMConfig.selectedGaussSceneId"
                                @change="handleGaussSceneChange"
                                class="full-width-input"
                              >
                                <el-option
                                  key="transparent"
                                  value="transparent"
                                  :label="t('transparentBackground')"
                                >
                                  <div class="scene-option-item">
                                    <i class="fa-solid fa-check-circle" style="color:#28a745;margin-right:6px;"></i>
                                    <span>{{ t('transparentBackground') }}</span>
                                  </div>
                                </el-option>
                                <!-- 默认场景分组 -->
                                <el-option-group :label="t('defaultScenes')">
                                  <el-option
                                    v-for="scene in VRMConfig.gaussDefaultScenes"
                                    :key="scene.id"
                                    :label="scene.name"
                                    :value="scene.id"
                                  >
                                    <div class="scene-option-item">
                                      <i class="fa-solid fa-star" style="color: #f39c12; margin-right: 6px;"></i>
                                      <span>{{ scene.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>

                                <!-- 用户上传场景分组 -->
                                <el-option-group :label="t('userScenes')" v-if="VRMConfig.gaussUserScenes.length > 0">
                                  <el-option
                                    v-for="scene in VRMConfig.gaussUserScenes"
                                    :key="scene.id"
                                    :label="scene.name"
                                    :value="scene.id"
                                  >
                                    <div class="scene-option-item">
                                      <i
                                        class="fa-solid fa-trash-can"
                                        style="color: #ff0000; margin-right: 6px;"
                                        @click.stop="deleteGaussSceneOption(scene.id)"
                                      ></i>
                                      <span>{{ scene.name }}</span>
                                    </div>
                                  </el-option>
                                </el-option-group>
                              </el-select>

                              <!-- 场景上传按钮 -->
                              <el-button
                                @click="showGaussSceneDialog = true"
                                type="warning"
                                class="add-server-btn"
                              >
                                <i class="fa-solid fa-plus"></i> {{ t('addGaussScene') }}
                              </el-button>
                            </el-form-item>
                            
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('vrmNotice1') }}<br>
                                  {{ t('vrmNotice2') }}<br>
                                  {{ t('vrmNotice3') }}
                                </div>
                              </template>
                            </el-alert>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- VRM模型上传对话框 -->
                  <el-dialog
                    v-model="showVrmModelDialog"
                    :title="t('uploadVrmModel')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleVrmModelDrop"
                        @click="browseVrmModelFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropVrm') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newVrmModel.name">
                        <div class="compact-file-item">
                          <span class="file-name">{{ newVrmModel.name }}</span>
                          <el-button
                            @click.stop="removeNewVrmModel"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newVrmModel.displayName"
                        :label="t('modelDisplayName')"
                        :placeholder="t('modelDisplayNamePlaceholder')"
                        required
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelVrmModelUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadVrmModel" :disabled="!newVrmModel.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>

                  <!-- VRMA动作上传对话框 -->
                  <el-dialog
                    v-model="showVrmaMotionDialog"
                    :title="t('uploadVrmaMotion')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleVrmaMotionDrop"
                        @click="browseVrmaMotionFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropVrma') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newVrmaMotion.name">
                        <div class="compact-file-item">
                          <span class="file-name">{{ newVrmaMotion.name }}</span>
                          <el-button
                            @click.stop="removeNewVrmaMotion"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newVrmaMotion.displayName"
                        :label="t('motionDisplayName')"
                        :placeholder="t('motionDisplayNamePlaceholder')"
                        required
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelVrmaMotionUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadVrmaMotion" :disabled="!newVrmaMotion.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>

                  <!-- 高斯场景上传对话框  GAUSS -->
                  <el-dialog
                    v-model="showGaussSceneDialog"
                    :title="t('uploadGaussScene')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleGaussSceneDrop"
                        @click="browseGaussSceneFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropGaussScene') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newGaussScene.name">
                        <div class="compact-file-item">
                          <span class="file-name">{{ newGaussScene.name }}</span>
                          <el-button
                            @click.stop="removeNewGaussScene"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newGaussScene.displayName"
                        :label="t('GaussSceneDisplayName')"
                        :placeholder="t('GaussSceneDisplayNamePlaceholder')"
                        required
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelGaussSceneUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadGaussScene" :disabled="!newGaussScene.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>

                  <!-- 朗读页面 -->
                  <div v-show="subMenu === 'read_bot'">
                    <el-tabs v-model="activeReadTab">
                      <!-- 配置标签页 -->
                      <el-tab-pane :label="t('FullTextReading')" name="full" key="full">
                        <el-form class="settings-form" :model="readConfig" label-position="top">
                          <div class="tool-item">
                            <!-- 配置头部 -->
                            <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                              <span>
                                <el-icon><i class="fa-solid fa-book-open-reader"></i></el-icon>
                                {{ t('readBot') }}
                              </span>
                              <div>
                                
                                <!-- 启动按钮 -->
                                <el-tooltip :content="t(isReadRunning ? (isReadPaused ? 'resume_read' : 'pause_read') : 'start_read')" placement="top">
                                  <el-button 
                                    type="primary" 
                                    @click="toggleRead" 
                                    :disabled="!readConfig.longText || isReadStarting"
                                    circle
                                  >
                                    <template v-if="isReadStarting">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else-if="isReadRunning && !isReadPaused">
                                      <i class="fa-solid fa-pause"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-play"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                <!-- 转换音频按钮 -->
                                <el-tooltip :content="t('convertAudioOnly')" placement="top">
                                  <el-button 
                                    type="success" 
                                    @click="convertAudioOnly" 
                                    circle
                                    :disabled="!readConfig.longText || isConvertingAudio"
                                  >
                                    <i v-if="isConvertingAudio" class="fa-solid fa-spinner fa-spin"></i>
                                    <i v-else class="fa-solid fa-wand-magic-sparkles"></i>
                                  </el-button>
                                </el-tooltip>
                                <!-- 下载音频按钮 -->
                                <el-tooltip :content="t('downloadAudio')" placement="top">
                                  <el-button 
                                    type="default" 
                                    @click="downloadAudio" 
                                    circle
                                    :disabled="(isAudioSynthesizing && isConvertingAudio) || audioChunksCount === 0"
                                  >
                                    <i v-if="isAudioSynthesizing && isConvertingAudio" class="fa-solid fa-spinner fa-spin"></i>
                                    <i v-else class="fa-solid fa-download"></i>
                                  </el-button>
                                </el-tooltip>

                                <!-- 停止按钮（更新为通用停止功能） -->
                                <el-tooltip :content="t('stop_all_tts')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="stopTTSActivities" 
                                    :disabled="(!isReadRunning && !isConvertingAudio) || isReadStopping || isConvertStopping"
                                    circle
                                  >
                                    <template v-if="isReadStopping || isConvertStopping">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-stop"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>
                            <div class="tool-content">
                              <!-- 新增：进度条区域 -->
                              <div class="progress-container" style="margin-top: 15px;">
                                <div class="progress-info" style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                  <span>{{ t('processingProgress') }}</span>
                                  <span>{{ processingProgressText }}</span>
                                </div>
                                <el-progress 
                                  :percentage="processingPercentage" 
                                  :status="progressStatus"
                                  :stroke-width="20"
                                  :text-inside="true"
                                ></el-progress>
                              </div>
                              <!-- 文件选择区域 -->
                              <el-form-item>
                                <!-- 选择textFiles中的文件 -->
                                <el-select class="full-width-input" v-model="selectedFile" @change="parseSelectedFile" :placeholder="t('selectFile')">
                                  <el-option
                                    v-for="file in textFiles"
                                    :key="file.unique_filename"
                                    :label="file.original_filename"
                                    :value="file.unique_filename"
                                  ></el-option>
                                </el-select>
                              </el-form-item>
                              <el-alert
                                type="info"
                                :closable="false"
                                class="mb-2"
                              >
                                <template #default>
                                  <div class="alert-content">
                                    {{ t('SeparatorNotice') }}<br>
                                    {{ t('SeparatorNotice1') }}
                                    <el-link
                                      type="primary"
                                      :underline="false"
                                      class="font-medium"
                                      @click="switchToTTS"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('TTSInterface') }}
                                    </el-link>
                                  </div>
                                </template>
                              </el-alert>
                              <div style="display: flex; justify-content: flex-end;margin-bottom: 16px;">
                                <el-tooltip :content="t('prevChapter')" placement="top">
                                  <el-button 
                                    v-show="this.readConfig.longTextList?.length > 0"
                                    type="default" 
                                    @click="PrevPage" 
                                    circle
                                  >
                                    <i class="fa-solid fa-arrow-left"></i>
                                  </el-button>
                                </el-tooltip>
                                <el-tooltip :content="t('nextChapter')" placement="top">
                                  <el-button 
                                    v-show="this.readConfig.longTextList?.length > 0"
                                    type="default" 
                                    @click="NextPage" 
                                    circle
                                  >
                                    <i class="fa-solid fa-arrow-right"></i>
                                  </el-button>
                                </el-tooltip>
                                <!-- 新增上传文件按钮 -->
                                <el-tooltip :content="t('uploadFile')" placement="top">
                                  <el-button 
                                    type="success" 
                                    @click="showFileDialog = true" 
                                    circle
                                  >
                                    <i class="fa-solid fa-file-arrow-up"></i>
                                  </el-button>
                                </el-tooltip>
                                <el-tooltip :content="t('clearText')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="clearLongText" 
                                    circle
                                  >
                                    <i class="fa-solid fa-broom"></i>
                                  </el-button>
                                </el-tooltip>
                              </div>
                              <el-form-item>
                                <el-input
                                    v-model="readConfig.longText"
                                    type="textarea"
                                    :rows=32
                                    :placeholder="t('longTextPlaceholder')"
                                    class="input-box">
                                </el-input>
                              </el-form-item>
                            </div>
                          </div>
                        </el-form>
                      </el-tab-pane>  
                      <el-tab-pane :label="t('SegmentedReading')" name="segment" key="segment">
                        <el-form class="settings-form" label-position="top">
                          <div class="tool-item">
                            <!-- 顶部工具栏 -->
                            <div class="tool-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
                              <span><el-icon><i class="fa-solid fa-list-ol"></i></el-icon> {{ t('segmentRead') }}</span>
                              <div>
                                <el-tooltip :content="t('playNextSegment')" placement="top">
                                  <el-button
                                    type="primary"
                                    circle
                                    :disabled="readState.ttsChunks.length===0 || readState.isPlaying"
                                    @click="playNextSegmentOnce"
                                  >
                                    <i class="fa-solid fa-step-forward"></i>
                                  </el-button>
                                </el-tooltip>
                                <!-- 连续播放 / 暂停 -->
                                <el-tooltip :content="t('continuousPlay')" placement="top">
                                  <el-button
                                    type="primary"
                                    circle
                                    :disabled="readState.ttsChunks.length===0 || isReadRunning"
                                    @click="toggleContinuousPlay"
                                  >
                                    <i :class="readState.isPlaying ? 'fa-solid fa-pause' : 'fa-solid fa-play'"></i>
                                  </el-button>
                                </el-tooltip>
                                <!-- 停止 -->
                                <el-tooltip :content="t('stopSegmentTTS')" placement="top">
                                  <el-button
                                    type="danger"
                                    circle
                                    :disabled="!readState.isPlaying && !isReadRunning"
                                    @click="stopSegmentTTS"
                                  >
                                    <i class="fa-solid fa-stop"></i>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>

                            <!-- 分段列表 -->
                            <!-- 外层只控制列表显隐，不控制行 -->
                            <div v-if="readState.ttsChunks.length"
                                key="seg-list-box"
                                class="segment-list"
                                style="max-height:420px;overflow:auto">

                              <!-- 直接对行做 v-for，避免 template 带来的 diff 问题 -->
                              <div v-for="(chunk, idx) in readState.ttsChunks"
                                  :key="idx"
                                  class="segment-item"
                                  :style="{ background: idx === readState.currentChunk ? '#ecf5ff' : '' }"
                                  style="display:flex;align-items:center;margin-bottom:8px;padding:8px;border:1px solid #dcdfe6;border-radius:4px">

                                <span style="min-width:30px;text-align:center">{{ idx + 1 }}</span>

                                <!-- 音色标签 / 选择框：同场过渡，防止闪帧 -->
                                <Transition name="el-fade-in-linear" mode="out-in">
                                  <!-- 关键：mode="out-in" 保证旧元素完全退场后再进新元素 -->
                                  <el-tag v-if="activeSegmentIdx !== idx"
                                          size="default"
                                          style="margin-right:8px;width:80px">
                                    {{ readState.chunks_voice[idx] }}
                                  </el-tag>

                                  <el-select v-else
                                            v-model="segmentVoiceEditBuffer[idx]"
                                            size="small"
                                            style="margin-right:8px;width:80px">
                                    <el-option key="default" label="default" value="default"></el-option>
                                    <el-option v-for="(cfg,name) in ttsSettings.newtts"
                                              :key="name"
                                              :label="name"
                                              :value="name" >
                                    </el-option>
                                  </el-select>
                                </Transition>

                                <div style="flex:1;margin-right:8px">
                                  <div v-if="activeSegmentIdx !== idx" class="segment-text">{{ chunk }}</div>
                                  <el-input v-else v-model="segmentEditBuffer" type="textarea" ></el-input>
                                </div>

                                <div>
                                  <el-button v-if="activeSegmentIdx !== idx"
                                            type="text" size="small"
                                            :disabled="isReadRunning||isReadingOnetext"
                                            @click="playSingleSegment(idx)" >
                                            <i class="fa-solid fa-play"></i>
                                  </el-button>
                                  <el-button type="text" size="small"
                                            :disabled="isReadRunning||isReadingOnetext"
                                            @click="toggleEditSegment(idx)" >
                                            <i :class="activeSegmentIdx === idx ? 'fa-solid fa-check' : 'fa-solid fa-pen'"></i>
                                  </el-button>
                                </div>
                              </div>
                            </div>



                            <!-- 空态 -->
                            <el-empty v-else :description="t('noSegmentList')" />
                          </div>
                        </el-form>
                      </el-tab-pane>
                    </el-tabs>

                    <!-- 文件上传对话框 -->
                    <el-dialog 
                      :title="t('uploadFile')" 
                      v-model="showFileDialog" 
                      width="600px"
                    >
                      <div class="upload-container">
                        <!-- 可点击的拖拽区域 -->
                        <div
                          class="drop-zone"
                          @dragover.prevent
                          @drop.prevent="handleReadDrop"
                          @click="browseReadFiles"
                        >
                          <el-icon :size="50"><upload /></el-icon>
                          <p>{{ t('clickOrDrop') }}</p>
                        </div>
                      </div>
                    </el-dialog>
                  </div>
                  <!-- 直播页面 -->
                  <div v-show="subMenu === 'live_stream'">
                    <el-tabs v-model="activeLiveTab">
                      <!-- 配置标签页 -->
                      <el-tab-pane :label="t('liveConfig')" name="live" key="live">
                        <el-form class="settings-form" :model="liveConfig" label-position="top">
                          <div class="tool-item">
                            <!-- 直播配置头部 -->
                            <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                              <span>
                                <el-icon><i class="fa-solid fa-video"></i></el-icon>
                                {{ t('live_stream_bot') }}
                              </span>
                              <div>
                                <!-- 启动按钮 -->
                                <el-tooltip :content="t('start_live')" placement="top">
                                  <el-button 
                                    type="primary" 
                                    @click="startLive" 
                                    :disabled="!isLiveConfigValid || isLiveRunning || isLiveStarting"
                                    circle
                                  >
                                    <template v-if="isLiveStarting">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-play"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 停止按钮 -->
                                <el-tooltip :content="t('stop_live')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="stopLive" 
                                    :disabled="!isLiveRunning || isLiveStopping"
                                    circle
                                  >
                                    <template v-if="isLiveStopping">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-stop"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 重载按钮 -->
                                <el-tooltip :content="t('reload_live')" placement="top">
                                  <el-button 
                                    @click="reloadLiveConfig" 
                                    :disabled="!isLiveRunning || isLiveReloading"
                                    circle
                                  >
                                    <template v-if="isLiveReloading">
                                      <i class="fa-solid fa-rotate fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-rotate"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>
                            <div class="tool-header">
                              <div class="header-left">
                                <span>
                                  {{t('liveSetting')}}
                                </span>
                              </div>
                            </div>
                            <div class="tool-content">
                              <el-form-item :label="t('onlyDanmaku')" class="form-item-align" label-position="left">
                                <el-switch 
                                  v-model="liveConfig.onlyDanmaku" 
                                  @change="autoSaveSettings"
                                ></el-switch>
                              </el-form-item>   
                              <el-form-item :label="t('danmakuQueueLimit')" class="form-item-align" label-position="left">
                                <el-slider
                                  v-model="liveConfig.danmakuQueueLimit"
                                  :min="1"
                                  :max="30"
                                  :step="1"
                                  show-input
                                  @change="autoSaveSettings"
                                />
                              </el-form-item> 
                              <el-form-item :label="t('danmakuWakeWord')">
                                <el-input
                                  v-model="liveConfig.wakeWord"
                                  :placeholder="t('wakeWordPlaceholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                            </div>
                          </div>
                        </el-form>
                      </el-tab-pane>
                      <el-tab-pane :label="t('bilibiliLive')" name="bilibili" key="bilibili">
                        <el-form class="settings-form" :model="liveConfig" label-position="top">
                          <div class="tool-item">
                            <!-- 直播配置头部 -->
                            <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                              <span>
                                <el-icon><i class="fa-brands fa-bilibili"></i></el-icon>
                                {{ t('live_stream_bot') }}
                              </span>
                              <div>
                                <!-- 启动按钮 -->
                                <el-tooltip :content="t('start_live')" placement="top">
                                  <el-button 
                                    type="primary" 
                                    @click="startLive" 
                                    :disabled="!isLiveConfigValid || isLiveRunning || isLiveStarting"
                                    circle
                                  >
                                    <template v-if="isLiveStarting">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-play"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 停止按钮 -->
                                <el-tooltip :content="t('stop_live')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="stopLive" 
                                    :disabled="!isLiveRunning || isLiveStopping"
                                    circle
                                  >
                                    <template v-if="isLiveStopping">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-stop"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 重载按钮 -->
                                <el-tooltip :content="t('reload_live')" placement="top">
                                  <el-button 
                                    @click="reloadLiveConfig" 
                                    :disabled="!isLiveRunning || isLiveReloading"
                                    circle
                                  >
                                    <template v-if="isLiveReloading">
                                      <i class="fa-solid fa-rotate fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-rotate"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>

                            <div class="tool-header">
                              <div class="header-left">
                                <span>
                                  {{t('bilibili')}}
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    href="https://open-live.bilibili.com/" 
                                    target="_blank"
                                  >
                                    <el-icon class="mr-1">
                                      <i class="fa-solid fa-key"></i>
                                    </el-icon>{{ t('gotoBilibiliOpenLive') }}
                                  </el-link>
                                </span>
                              </div>
                              <el-switch v-model="liveConfig.bilibili_enabled" @click.stop @change="autoSaveSettings"/>
                            </div>
                            <div class="tool-content">
                              <el-form-item :label="t('liveType')">
                                <el-select
                                  v-model="liveConfig.bilibili_type"
                                  :placeholder="t('liveTypePlaceholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                >
                                  <el-option :label="t('web')" value="web"></el-option>
                                  <el-option :label="t('bilibili_open_live')" value="open_live"></el-option>
                                </el-select>
                              </el-form-item>      
                              <el-form-item :label="t('roomID')" v-if="liveConfig.bilibili_type === 'web'">
                                <el-input
                                  v-model="liveConfig.bilibili_room_id"
                                  :placeholder="t('roomIDPlaceholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                              <el-form-item :label="t('sessdata')" v-if="liveConfig.bilibili_type === 'web'">
                                <el-input
                                  v-model="liveConfig.bilibili_sessdata"
                                  :placeholder="t('sessdataPlaceholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                              <el-alert
                                type="info"
                                :closable="false"
                                class="mb-2"
                                v-if="liveConfig.bilibili_type === 'web'"
                              >
                                <template #default>
                                  <div class="alert-content">
                                    {{ t('webBilibiliInfo') }}
                                  </div>
                                </template>
                              </el-alert>
                              <el-form-item label="ACCESS KEY ID" v-if="liveConfig.bilibili_type === 'open_live'">
                                <el-input
                                  v-model="liveConfig.bilibili_ACCESS_KEY_ID"
                                  :placeholder="t('ACCESS_KEY_ID_Placeholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                              <el-form-item label="ACCESS KEY SECRET" v-if="liveConfig.bilibili_type === 'open_live'">
                                <el-input
                                  v-model="liveConfig.bilibili_ACCESS_KEY_SECRET"
                                  :placeholder="t('ACCESS_KEY_SECRET_Placeholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                              <el-form-item label="APP ID" v-if="liveConfig.bilibili_type === 'open_live'">
                                <el-input
                                  v-model="liveConfig.bilibili_APP_ID"
                                  :placeholder="t('APP_ID_Placeholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                              <el-form-item label="ROOM OWNER AUTH CODE" v-if="liveConfig.bilibili_type === 'open_live'">
                                <el-input
                                  v-model="liveConfig.bilibili_ROOM_OWNER_AUTH_CODE"
                                  :placeholder="t('ROOM_OWNER_AUTH_CODE_Placeholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>
                            </div>

                          </div>
                        </el-form>
                      </el-tab-pane>
                      <el-tab-pane :label="t('youtubeLive')" name="youtube" key="youtube">
                        <el-form class="settings-form" :model="liveConfig" label-position="top">
                          <div class="tool-item">
                            <!-- 直播配置头部 -->
                            <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                              <span>
                                <el-icon><i class="fa-brands fa-youtube"></i></el-icon>
                                {{ t('live_stream_bot') }}
                              </span>
                              <div>
                                <!-- 启动按钮 -->
                                <el-tooltip :content="t('start_live')" placement="top">
                                  <el-button 
                                    type="primary" 
                                    @click="startLive" 
                                    :disabled="!isLiveConfigValid || isLiveRunning || isLiveStarting"
                                    circle
                                  >
                                    <template v-if="isLiveStarting">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-play"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 停止按钮 -->
                                <el-tooltip :content="t('stop_live')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="stopLive" 
                                    :disabled="!isLiveRunning || isLiveStopping"
                                    circle
                                  >
                                    <template v-if="isLiveStopping">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-stop"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 重载按钮 -->
                                <el-tooltip :content="t('reload_live')" placement="top">
                                  <el-button 
                                    @click="reloadLiveConfig" 
                                    :disabled="!isLiveRunning || isLiveReloading"
                                    circle
                                  >
                                    <template v-if="isLiveReloading">
                                      <i class="fa-solid fa-rotate fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-rotate"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>

                            <!-- YouTube 配置 -->
                            <div class="tool-header">
                              <div class="header-left">
                                <span>
                                  YouTube
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    href="https://console.cloud.google.com/apis/credentials"
                                    target="_blank"
                                  >
                                    <el-icon class="mr-1"><i class="fa-solid fa-key"></i></el-icon>
                                    {{ t('getYouTubeAPIKey') }}
                                  </el-link>
                                </span>
                              </div>
                              <el-switch
                                v-model="liveConfig.youtube_enabled"
                                @change="autoSaveSettings"
                              />
                            </div>

                            <div class="tool-content">
                              <el-form-item :label="t('youtubeVideoId')">
                                <el-input
                                  v-model="liveConfig.youtube_video_id"
                                  :placeholder="t('youtubeVideoIdPlaceholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>

                              <el-form-item :label="t('youtubeApiKey')">
                                <el-input
                                  v-model="liveConfig.youtube_api_key"
                                  :placeholder="t('youtubeApiKeyPlaceholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>

                              <el-alert type="info" :closable="false" class="mb-2">
                                <template #default>
                                  <div class="alert-content">
                                    {{ t('youtubeHelp') }}
                                  </div>
                                </template>
                              </el-alert>
                            </div>
                          </div>
                        </el-form>
                      </el-tab-pane>
                      <el-tab-pane :label="t('twitchLive')" name="twitch" key="twitch">
                        <el-form class="settings-form" :model="liveConfig" label-position="top">
                          <div class="tool-item">
                            <!-- 直播配置头部 -->
                            <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                              <span>
                                <el-icon><i class="fa-brands fa-twitch"></i></el-icon>
                                {{ t('live_stream_bot') }}
                              </span>
                              <div>
                                <!-- 启动按钮 -->
                                <el-tooltip :content="t('start_live')" placement="top">
                                  <el-button 
                                    type="primary" 
                                    @click="startLive" 
                                    :disabled="!isLiveConfigValid || isLiveRunning || isLiveStarting"
                                    circle
                                  >
                                    <template v-if="isLiveStarting">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-play"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 停止按钮 -->
                                <el-tooltip :content="t('stop_live')" placement="top">
                                  <el-button 
                                    type="danger" 
                                    @click="stopLive" 
                                    :disabled="!isLiveRunning || isLiveStopping"
                                    circle
                                  >
                                    <template v-if="isLiveStopping">
                                      <i class="fa-solid fa-spinner fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-stop"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                                
                                <!-- 重载按钮 -->
                                <el-tooltip :content="t('reload_live')" placement="top">
                                  <el-button 
                                    @click="reloadLiveConfig" 
                                    :disabled="!isLiveRunning || isLiveReloading"
                                    circle
                                  >
                                    <template v-if="isLiveReloading">
                                      <i class="fa-solid fa-rotate fa-spin"></i>
                                    </template>
                                    <template v-else>
                                      <i class="fa-solid fa-rotate"></i>
                                    </template>
                                  </el-button>
                                </el-tooltip>
                              </div>
                            </div>

                            <!-- Twitch 配置 -->
                            <div class="tool-header">
                              <div class="header-left">
                                <span>
                                  Twitch
                                  <el-link
                                    type="primary"
                                    :underline="false"
                                    href="https://twitchtokengenerator.com"
                                    target="_blank"
                                  >
                                    <el-icon class="mr-1"><i class="fa-solid fa-key"></i></el-icon>
                                    {{ t('getTwitchAccessToken') }}
                                  </el-link>
                                </span>
                              </div>
                              <el-switch
                                v-model="liveConfig.twitch_enabled"
                                @change="autoSaveSettings"
                              />
                            </div>

                            <div class="tool-content">
                              <el-form-item :label="t('twitchChannel')">
                                <el-input
                                  v-model="liveConfig.twitch_channel"
                                  :placeholder="t('twitchChannelPlaceholder')"
                                  class="full-width-input"
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>

                              <el-form-item :label="t('twitchAccessToken')">
                                <el-input
                                  v-model="liveConfig.twitch_access_token"
                                  :placeholder="t('twitchAccessTokenPlaceholder')"
                                  class="full-width-input"
                                  show-password
                                  @change="autoSaveSettings"
                                />
                              </el-form-item>

                              <el-alert type="info" :closable="false" class="mb-2">
                                <template #default>
                                  <div class="alert-content">
                                    {{ t('twitchHelp') }}
                                  </div>
                                </template>
                              </el-alert>
                            </div>
                          </div>
                        </el-form>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
            </div>
        </div>
        <div v-show="activeMenu === 'api-group'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in apiTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="suite-content">
              <!-- 开发工具页面 -->
              <div v-show="subMenu === 'develop'" class="page agents-container">
                <!-- Node.js 卡片：已安装 & 未安装 双状态 -->
                <el-card shadow="hover" class="sherpa-card">
                  <!-- 头部：标题 + 状态标签 -->
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <span><strong>Node.js</strong></span>

                    <div class="d-flex gap-2">
                      <el-button
                        v-if="!nodeInstalled"
                        type="primary"
                        :loading="nodeInstalling"
                        @click="installNode"
                      >
                        <i class="fa-solid fa-download"></i>
                        {{ t('installNode') }}
                      </el-button>
                      <el-tag v-else type="success" effect="dark" size="large">  
                        <i class="fa-solid fa-circle-check"></i>
                        {{ t('installed') }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 进度条 -->
                  <el-progress
                    v-if="nodeInstalling && nodeProgress > 0"
                    :percentage="nodeProgress"
                    :status="nodeProgress === 100 ? 'success' : null"
                    style="margin-top: 16px;"
                    :stroke-width="10"
                  />
                </el-card>
                <!-- uv 卡片：已安装 & 未安装 双状态 -->
                <el-card shadow="hover" class="sherpa-card">
                  <!-- 头部：标题 + 状态标签 -->
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <span><strong>UV</strong></span>

                    <div class="d-flex gap-2">
                      <el-button
                        v-if="!uvInstalled"
                        type="primary"
                        :loading="uvInstalling"
                        @click="installUv"
                      >
                        <i class="fa-solid fa-download"></i>
                        {{ t('installUv') }}
                      </el-button>
                      <el-tag v-else type="success" effect="dark" size="large">
                        <i class="fa-solid fa-circle-check"></i>
                        {{ t('installed') }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 进度条 -->
                  <el-progress
                    v-if="uvInstalling && uvProgress > 0"
                    :percentage="uvProgress"
                    :status="uvProgress === 100 ? 'success' : null"
                    style="margin-top: 16px;"
                    :stroke-width="10"
                  />
                </el-card>
                <!-- Git 卡片：已安装 & 未安装 双状态 -->
                <el-card
                  shadow="hover"
                  class="sherpa-card"
                >
                  <!-- 头部：标题 + 状态标签 -->
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <span><strong>Git</strong></span>

                    <div class="d-flex gap-2">
                      <!-- 未安装 -->
                      <el-button
                        v-if="!gitInstalled"
                        type="primary"
                        :loading="gitInstalling"
                        @click="installGit"
                      >
                        <i class="fa-solid fa-download"></i>
                        {{ t('installGit') }}
                      </el-button>

                      <!-- 已安装 -->
                      <el-tag
                        v-else
                        type="success"
                        effect="dark"
                        size="large"
                      >
                      <i class="fa-solid fa-circle-check"></i>
                        {{ t('installed') }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 进度条：只在安装过程中出现 -->
                  <el-progress
                    v-if="gitInstalling && gitProgress > 0"
                    :percentage="gitProgress"
                    :status="gitProgress === 100 ? 'success' : null"
                    style="margin-top: 16px;"
                    :stroke-width="10"
                  />
                </el-card>
              </div>
              <!-- 智能体页面 -->
              <div v-show="subMenu === 'agents'" class="page agents-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有智能体 -->
                  <div class="provider-card agent-card" v-for="agent in agents" :key="agent.id">
                    <div class="card-header">
                      <el-switch v-model="agent.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <!-- 更新删除按钮样式 -->
                        <el-button @click="removeAgent(agent.id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    
                    <div class="agent-content">
                      <div class="agent-header">
                        <span class="agent-name">{{ agent.name }}</span>
                        <!-- 添加复制功能 -->
                        <el-button
                          size="small"
                          type="info"
                          @click="copyAgentName(agent.name)"
                        >
                          <i class="fa-regular fa-copy"></i>
                        </el-button>
                      </div>
                      <!-- 带复制功能的ID展示 -->
                      <el-tag 
                        type="info" 
                        size="small" 
                        class="agent-id clickable"
                        @click="copyAgentId(agent.id)"
                      >
                        {{ agent.id }}
                        <i class="fa-regular fa-copy"></i>
                      </el-tag>
                      <p class="agent-prompt">{{ agent.system_prompt }}</p>
                    </div>
                  </div>
                  <!-- 添加新智能体 -->
                  <div class="provider-card add-tile" @click="showAgentForm = true;newAgent.system_prompt = this.system_prompt">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewAgent') }}</div>
                  </div>
                </div>
                <!-- 智能体编辑对话框 -->
                <el-dialog v-model="showAgentForm" :title="editingAgent ? t('editAgent') : t('addAgent')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('agentName')" required>
                      <el-input v-model="newAgent.name" :placeholder="t('agentNamePlaceholder')"/>
                    </el-form-item>
                    <el-form-item :label="t('systemPrompt')" required>
                      <el-input 
                        v-model="newAgent.system_prompt" 
                        type="textarea" 
                        :rows="6"
                        :placeholder="t('systemPromptPlaceholder')"/>
                    </el-form-item>
                  </el-form>
                  <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('agentInfo') }}
                      </div>
                    </template>
                  </el-alert>
                  <template #footer>
                    <el-button @click="showAgentForm = false">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="saveAgent"
                      :disabled="!newAgent.name || !newAgent.system_prompt">
                      {{ t('createAgent') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 扩展页面 -->
              <div v-show="subMenu === 'extension'" class="page extension-container">
                <!-- Git 卡片：已安装 & 未安装 双状态 -->
                <el-card
                  shadow="hover"
                  class="sherpa-card"
                >
                  <!-- 头部：标题 + 状态标签 -->
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <span><strong>Git</strong></span>

                    <div class="d-flex gap-2">
                      <!-- 未安装 -->
                      <el-button
                        v-if="!gitInstalled"
                        type="primary"
                        :loading="gitInstalling"
                        @click="installGit"
                      >
                        <i class="fa-solid fa-download"></i>
                        {{ t('installGit') }}
                      </el-button>

                      <!-- 已安装 -->
                      <el-tag
                        v-else
                        type="success"
                        effect="dark"
                        size="large"
                      >
                      <i class="fa-solid fa-circle-check"></i>
                        {{ t('installed') }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 进度条：只在安装过程中出现 -->
                  <el-progress
                    v-if="gitInstalling && gitProgress > 0"
                    :percentage="gitProgress"
                    :status="gitProgress === 100 ? 'success' : null"
                    style="margin-top: 16px;"
                    :stroke-width="10"
                  />
                </el-card>
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有智能体 -->
                  <div class="provider-card" v-for="extension in extensions" :key="extension.id">
                    <div class="card-header">
                      <el-tooltip :content="t('useExtension')" placement="top">
                        <el-button 
                          type="primary" 
                          @click="switchExtension(extension);this.activeMenu = 'home';"
                          circle
                        >
                          <i class="fa-solid fa-play"></i>
                        </el-button>
                      </el-tooltip>
                      <div class="card-actions">
                        <el-button v-if="isElectron" @click="openExtensionInWindow(extension)" type="primary" circle size="small">
                          <i class="fa-solid fa-window-restore"></i>
                        </el-button>
                        <el-button @click="openExtension(extension)" type="default" circle size="small">
                          <i class="fa-solid fa-external-link"></i>
                        </el-button>
                        <!-- 更新删除按钮样式 -->
                        <el-button @click="removeExtension(extension)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <div class="kb-header"> 
                        <h3>{{ extension.name }}</h3>
                        <el-tag 
                          type="info" 
                          size="small" 
                        >
                          v{{ extension.version }}
                        </el-tag>                      
                      </div>
                      <p class="kb-description">{{ extension.author }}</p>
                      <div class="kb-meta">
                        <p>{{ extension.description }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 添加新扩展 -->
                  <div class="provider-card add-tile" @click="openAddExtensionDialog">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewExtension') }}</div>
                  </div>
                </div>
                <!-- 添加扩展对话框 -->
                <el-dialog
                  v-model="showExtensionForm"
                  :title="t('addNewExtension')"
                  width="80%"
                >
                  <!-- GitHub 地址输入 -->
                  <div class="line-box">
                    <el-input
                      v-model="newExtensionUrl"
                      placeholder="https://github.com/owner/repo"
                      class="fill-input"
                    ></el-input>
                    <el-button
                      type="primary"
                      :loading="installLoading"
                      :disabled="!newExtensionUrl.trim()"
                      @click="addExtension"
                    >
                      {{ t('add') }}
                    </el-button>
                  </div>

                  <!-- Electron 额外功能 -->
                  <div v-if="isElectron" style="margin-top: 12px;">
                    <el-divider>{{t('or')}}</el-divider>
                    <el-button 
                      @click="selectLocalZip" 
                      :loading="installLoading"  
                      type="primary" 
                      class="add-server-btn">
                      {{t('localZipInstallation')}}
                    </el-button>
                    <input
                      ref="zipInput"
                      type="file"
                      accept=".zip"
                      style="display: none"
                      @change="onZipSelected"
                    ></input>
                  </div>
                  <el-divider>{{t('or')}}</el-divider>
                  
                  <!-- 远程插件列表 - 卡片形式 -->
                  <div class="plugin-header">
                    <h3>{{t('availableExtensions')}}</h3>
                    <div class="plugin-button-group">
                      <el-button 
                        @click="openExtfile" 
                        type="primary">
                        {{t('openExtfile')}}
                      </el-button>
                      <el-button 
                        @click="openRepository('https://github.com/super-agent-party/super-agent-party.github.io')" 
                        type="primary">
                        {{t('addYourExtensions')}}
                      </el-button>
                      <el-button 
                        @click="handleRefreshClick" 
                        type="primary"
                        :loading="refreshing">
                        {{refreshButtonText}}
                      </el-button>
                    </div>
                  </div>
                  
                  <div v-loading="installLoading" class="plugins-container">
                    <div v-if="remotePlugins.length === 0" class="empty-plugins">
                      <el-empty :description="t('noExtensionsFound')"></el-empty>
                    </div>
                    <div v-else class="plugins-grid">
                      <div v-for="plugin in remotePlugins" :key="plugin.name" class="plugin-card">
                        <div class="plugin-content">
                          <h4 class="plugin-name">{{ plugin.name }}</h4>
                          <p class="plugin-description">{{ plugin.description }}</p>
                        </div>
                        <div class="plugin-action">
                          <el-button
                            v-if="plugin.repository"
                            type="primary"
                            @click="openRepository(plugin.repository)"
                            class="repo-button"
                          >
                            <i class="fa-brands fa-github"></i>
                            {{ t('viewRepository') }}
                          </el-button>
                          <!-- 紧挨着原来的 uninstall / install 按钮 -->
                          <el-button
                            v-if="plugin.installed"
                            type="warning"
                            :loading="plugin._updating"
                            @click="updatePlugin(plugin)"
                          >
                            {{ t('update') }}
                          </el-button>
                          <el-button
                            :type="plugin.installed ? 'danger' : 'primary'"
                            @click="togglePlugin(plugin)"
                          >
                            {{ plugin.installed ? t('uninstall'): t('install') }}
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-dialog>
              </div>
              <!-- OpenAI风格API -->
              <div v-show="subMenu === 'openai'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <!-- 原有SuperAPI内容 -->
                    <div class="tool-header">
                      <span>
                        <el-icon><i class="fa-solid fa-link"></i></el-icon>
                        {{ t('openaiStyleAPI') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('superAPIInstructions') }}
                      </el-alert>
                      <!-- 模型名称 -->
                      <el-form-item :label="t('modelName')" class="form-item-align" label-position="top">
                        <el-input
                          :value="'super-model'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyModel"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>

                      <!-- API端点 -->
                      <el-form-item :label="t('apiEndpoint')" class="form-item-align" label-position="top">
                        <el-input
                          :value="partyURL+'/v1'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>

                      <!-- API key -->
                      <el-form-item :label="t('openaiStyleAPIKey')" class="form-item-align" label-position="top">
                        <el-input
                          value="super-secret-key"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <!-- 在index.html的API配置区块内添加 -->
                      <el-form-item :label="t('exampleLanguage')" class="form-item-align" label-position="top">
                        <el-select
                          v-model="selectedCodeLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Python" value="python"></el-option>
                          <el-option label="JavaScript" value="javascript"></el-option>
                          <el-option label="cURL" value="curl"></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 修改index.html中的代码块结构 -->
                      <div class="code-block">
                        <div class="code-header">
                          <span class="code-lang">{{ selectedCodeLang }}</span>
                          <button class="copy-button" @click.prevent="handleCopy"><i class="fa-solid fa-copy"></i></button>
                        </div>
                        <pre><code class="hljs" :class="'language-' + selectedCodeLang">{{ codeExamples[selectedCodeLang] }}</code></pre>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- FastAPI文档 -->
              <div v-show="subMenu === 'fastapi'" class="page">
                <iframe 
                  :src="partyURL + '/docs'" 
                  frameborder="0" 
                  width="100%" 
                  allow="fullscreen"
                  class="fastapi-iframe"
                ></iframe>
              </div>
              <!-- MCP风格API -->
              <div v-show="subMenu === 'mcp'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <!-- 原有SuperAPI内容 -->
                    <div class="tool-header">
                      <span>
                        <el-icon><i class='fa-solid fa-server'></i></el-icon>
                        {{ t('MCPStyleAPI') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('MCPAPIInstructions') }}
                      </el-alert>
                      <!-- API端点 -->
                      <el-form-item :label="t('apiEndpoint')" class="form-item-align" label-position="top">
                        <el-input
                          :value="partyURL+'/mcp'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyMCPEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- VRM桌宠API -->
              <div v-show="subMenu === 'vrm'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <!-- 原有SuperAPI内容 -->
                    <div class="tool-header">
                      <span>
                        <el-icon><i class='fa-solid fa-server'></i></el-icon>
                        {{ t('vrmAPI') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('vrmAPIInstructions') }}
                      </el-alert>
                      <!-- API端点 -->
                      <el-form-item :label="t('apiEndpoint')" class="form-item-align" label-position="top">
                        <el-input
                          :value="partyURL+'/vrm.html'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyVrmEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <!-- API端点 -->
                      <el-form-item :label="t('vmcpReceive')" class="form-item-align" label-position="top">
                        <el-input
                          value="http://127.0.0.1:39539"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyURL('http://127.0.0.1:39539')"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item :label="t('vmcpSend')" class="form-item-align" label-position="top">
                        <el-input
                          value="http://127.0.0.1:39540"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyURL('http://127.0.0.1:39540')"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                        <el-alert
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          {{ t('vmcpInstructions') }}
                        </el-alert>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- docker -->
              <div v-show="subMenu === 'docker'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <div class="tool-header">
                      <span>
                        <el-icon><i class='fa-brands fa-docker'></i></el-icon>
                        {{ t('docker') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('dockerInstructions') }}
                      </el-alert>
                      <!-- 修改index.html中的代码块结构 -->
                      <div class="code-block">
                        <div class="code-header">
                          <span class="code-lang">shell</span>
                          <button class="copy-button" @click.prevent="handleCopy"><i class="fa-solid fa-copy"></i></button>
                        </div>
                        <pre><code class="hljs language-shell">{{ dockerExamples }}</code></pre>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 浏览器模式 -->
              <div v-show="subMenu === 'browser'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <span>
                      <el-icon>
                        <i class="fa-solid fa-globe"></i>
                      </el-icon>
                      {{ t('useWebmode') }}
                    </span>
                    <div class="browser-mode-btn-container">
                      <el-button
                        class="browser-mode-btn"
                        type="primary"
                        @click="launchBrowserMode"
                        round
                        size="large">
                        <i class="fa-solid fa-globe" v-if="!isBrowserOpening"></i>
                        <transition name="bounce">
                          <span v-if="isBrowserOpening" class="ml-2">
                            <el-icon class="is-loading"><loading /></el-icon>
                            {{ t('launching') }}
                          </span>
                          <span v-else class="ml-2">
                            {{ t('launchBrowserMode') }}
                          </span>
                        </transition>
                      </el-button>
                    </div>
                    <canvas id="qrcode" style="display: block; margin: 20px auto;"></canvas>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('clickToUse') }}<br>
                          {{ t('scanToUse') }}
                        </div>
                      </template>
                    </el-alert>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('browserEmbedCodeInstructions') }}
                      </el-alert>
                      <!-- 修改index.html中的代码块结构 -->
                      <div class="code-block">
                        <div class="code-header">
                          <span class="code-lang">html</span>
                          <button class="copy-button" @click.prevent="handleCopy"><i class="fa-solid fa-copy"></i></button>
                        </div>
                        <pre><code class="hljs language-html">{{ browserEmbedCodeExamples }}</code></pre>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
  <!-- 引入Vue和Element Plus -->
  <script src="node_modules/vue/dist/vue.global.js"></script>
  <script src="node_modules/element-plus/dist/index.full.js"></script>
  <script src="node_modules/@element-plus/icons-vue/dist/index.iife.min.js"></script>
  <script src="js/vue_data.js"></script>
  <script src="js/vue_methods.js"></script>
  <script src="js/renderer.js"></script>
</body>
</html>
